ES6中字符串的扩展

字符串的遍历器接口

使用for...of

js 复制代码

for(let x of 'foo') {
    console.log(x);
}
// 'f'; 'o'; 'o'

at()

ES5中的charAt()方法，返回字符串给定位置的字符。但是不能识别码点大于0xFFFF的字符，at方法可以

includes()、startsWith()、endsWith()

用来确定一个字符串是否包含另一个字符串

有两个参数，第一个参数是要检测的字符串，第二个是从那个位置开始，第二个参数可以不用传

includes()：返回布尔值，表示是否查找到该字符串

startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部

endWith()：返回布尔值，表示参数字符串是否在源字符串的尾部

js 复制代码

const str = 'hello world';

str.includes('h'); // true
str.startsWith('h'); // true
str.startsWith('e'); // false
str.startsWith('l', 2); // true  从下标2开始查询
str.endsWith('e'); // false
str.endsWith('d'); // true

repeat()

将一个字符串复制n次，返回一个新字符串。

js 复制代码

'x'.repeat(2); // xx

如果是小数会取整

如果是负数或者Infinity会报错

如果是0 - 1之间的小数，则等于0。

参数NaN等于0，要是0的话返回值就是一个空字符。

如果参数是字符串或者其他，则会先转为数字，如果转化不成功，返回值就是空字符。

padStart()、padEnd()

用于补全字符串的长度，如果一个字符串的长度不够，会在头部和尾部进行补全。

接受两个参数

指定字符串的长度
用来补全的字符串

js 复制代码

'x'.padEnd(3, 'abcd'); // 'xab'
'x'.padStart(3, 'abcd'); // 'ab3'

如果补全的字符串和原字符长度和大于指定的长度，则补全的字符串会自动被截取掉。

如果省略第二个参数，会用空格来代替。

模板字符串

在传统输出模板字符串，比如拼接字符串，都使用+符号，这个写法不方便。

ES6中的模板字符串使用反引号(`)标识，如果其中有变量，则使用${}符号

js 复制代码

// 之前的
'x' + '12' // 'x12'

// 现在
`x12` // 'x12'
const a = 'bc';
`x${a}12` // 'xbc12'

若在模板字符串中使用反引号，需要在使用前先转义。

在模板字符串表示多行时，其中的空格和换行都会保留，如果不想换行可以使用trim方法。

大括号中可以放变量、表达式、进行运算、引用对象属性、还能调用函数。

如果大括号内的值不是字符串，则会转化成字符串，再进行输出。

如果大括号内就是一个字符串，会直接输出。

标签模板

可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串，被称为标签模板。

标签模板其实是函数调用的一种特殊形式，标签指的是函数，模板字符串就是函数的参数。

js 复制代码

alert`123`;
// 等同于
alert(123);

当模板字符串中有变量或者表达式时，会将函数参数进行分割，以字符串(数组形式)，计算后的值从左到右排列

js 复制代码

var a = 5;
var b = 10;
tag`Hello ${a + b} world ${a *b}`;
// 等同于
tag(['Hello' , ' world', ''], 15, 50);

还有一个重要作用是过滤HTML字符串，防止用户输入恶意内容

String.raw()

用来充电模板字符串的处理函数，返回一个反斜线都被转义(即反斜线前面再加一个反斜线)的字符串，对应于替换变量后的模板字符串。