ES6，新增语法整理之字符串增强

一、字符串新增使用方法 – 模板字符串

模板字符串是ES6中引入的一种新的字符串语法，它允许嵌入表达式，支持多行字符串，并且无需使用连接符（如+）来拼接字符串。模板字符串使用反引号（`）来标识，而不是普通的单引号（'）或双引号（"）。

1、基本用法

let firstName = "Chen";  
let lastName = "Xiao";  
let name= `${firstName+" "+lastName}`; //或者 let name = `${firstName} ${lastName}` 
console.log(name); // 输出：Chen Xiao
let sayHi = `Hi, ${name} how are you?`;
console.log(sayHi);//输出：Hi,Chen Xiao how are you?


// 支持多行字符串
let sayHello = `Hello，${name}  
how are you?`;  
console.log(sayHello );
/**  输出：
Hello,Chen Xiao
how are you?
**/

2、反斜杠转义

如果需要输出一些特殊字符串，比如`，$，{}等，需要使用反斜杠 / 来输出。
以下示例：

let a = `this is \$5`
console.log(a)  \\输出 this is $5
let b = `this is \`dog\``
console.log(b)	\\输出  this is `dog`

3、模板中如果使用变量，需使用${}，变量用在{}之内 ，且在{}内可以使用任意JavaScript表达式

let x = 1;
let y = 2;
let a = `${x} + ${y} = ${x + y}`
console.log(a)   //输出 "1 + 2 = 3"

let b = `${x} + ${y * 2} = ${x + y * 2}`
console.log(b)   //输出 "1 + 4 = 5"

// 引用对象属性
let obj = {x: 1, y: 2};
let c = `${obj.x + obj.y}`
console.log(c)   //输出 3

// 调用函数
function fn() {
  return "Hello World";
}
let d = `foo ${fn()} bar`
console.log(d)   //输出 foo Hello World bar

二、字符串新增的常用方法

1、字符串是否包含在另一个字符串中，新增三种方式

- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

es5方法
- indexOf(): 返回number类型，表示查询的字符串在被查询的字符串中的索引位置，未查询到的时候返回-1

示例

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

// 第二个参数，表示开始搜索的位置。
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

2、消除字符串头部尾部的空格

新增方法trimStart()，trimEnd()，可以消除字符串头部和尾部的空格。

const s = '  123  ';

s.trim() // "123"
s.trimStart() // "123  "
s.trimEnd() // "  123"

3、字符串替换replaceAll()

// es5
'aabbcc'.replace('b', '_')

// es5替换全部,需使用正则表达式的g修饰符
'aabbcc'.replace(/b/g, '_') ; 
// 'aa__cc'

// es6
'aabbcc'.replaceAll('b', '_')
// 'aa__cc'

4、新增repeat(n)方法返回一个新字符串，表示将原字符串重复n次

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

// 参数如果是小数，会被取整
'na'.repeat(2.9) // "nana"

// 参数是负数或者Infinity，会报错
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

// 参数是字符串，则会先转换成数字
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

5、字符串补全长度方法，padStart()用于头部补全，padEnd()用于尾部补全

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

// 如果用来补全的字符串与原字符串，两者的长度之和
// 超过了最大长度，则会截去超出位数的补全字符串
'abc'.padStart(10, '0123456789')
// '0123456abc'

// 省略第二个参数，默认使用空格补全长度
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

// padStart()的常见用途是为数值补全指定位数。
// 下面代码生成 10 位的数值字符串
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"

// 另一个用途是提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

6、新增startsWith() 和 endsWith()方法，表示是否以指定的字符串开头或结尾，返回布尔值

let s = 'Hello world!';  
s.startsWith('Hello') // true  
s.endsWith('!') // true

7、新增字符串遍历器接口

允许字符串被for…of循环遍历