ES6 字符串的扩展

ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。
(这块使用的不多,暂时就不做什么介绍,感兴趣的自己找点资料研究一下)

1.字符串的遍历器

ES6 为字符串添加了遍历器接口(Iterator),使得字符串可以被for...of循环遍历。

for (let codePoint of 'hello') {
  console.log(codePoint)
}
// h  e   l  l  o

2.includes(), startsWith(), endsWith()

传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法:
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。

     let s = 'Hello world!';
    console.log(s.startsWith('Hello',0)); // true
    console.log(s.startsWith('Hello',4)); // false
    console.log(s.endsWith('!',12)); // true
    console.log(s.endsWith('!',0)); // false
    console.log(s.includes('o',7)); // true
    console.log(s.indexOf('wo'));//6

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

3.repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

    console.log('hello'.repeat(2)); // "hellohello"

4.padStart(),padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

    console.log('x'.padStart(5, 'ab')); // 'ababx'
    console.log('x'.padStart(4, 'ab')); // 'abax'
    console.log('x'.padEnd(5, 'ab')); // 'xabab'
    console.log('x'.padEnd(4, 'ab')); // 'xaba'

如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
如果省略第二个参数,默认使用空格补全长度。

   console.log('x'.padStart(4)); // '   x'
   console.log('x'.padEnd(4)); // 'x   '

5.matchAll()

matchAll方法返回一个正则表达式在当前字符串的所有匹配

6.模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

//反斜杠转义
let greeting = `\`Yo\` World!`;

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。模板字符串中嵌入变量,需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中,可以使用trim方法消除。

    function fn() {
        return "Hello World";
    }
    console.log(`foo ${fn()} bar`);//foo Hello World bar

模板字符串之中还能调用函数。如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

7.标签模板

模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

console.log`aaaaa`;
console.log('aaaaa');

模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。

let a = 5;
let b = 10;

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

tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。
tag函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接受到value1和value2两个参数。
tag函数所有参数的实际值如下:
第一个参数:['Hello ', ' world ', '']
第二个参数: 15
第三个参数:50

8.String.raw()

String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。

console.log(String.raw`Hi\n${2+3}!`);//Hi\n5!

你可能感兴趣的:(ES6 字符串的扩展)