字符串扩展、模板字符串---深入理解ES6（三）

ES6中新增的对字符串的处理方法。

一、字符串中的子串识别

在一段字符串中检测另一段子字符串，用indexOf（）方法。

ES新增3个类似的方法：

includes（）方法：如果在字符串中检测到指定文本，返回true。

startsWith（）方法：如果在字符串的起始部分检测到指定文本，返回true。

endsWith ( )方法：如果在字符串结尾部分检测到指定文本，返回true。

以上的三个方法都接受2个参数：第一个参数指定要搜索的文本；第二个是可选的，指定一个开始搜索的位置的索引值。如果指定了第二个参数，则includes()方法和startsWith（）方法会从这个索引值的位置开始匹配，endsWith()方法则从这个索引值减去欲搜索文本长度的位置开始正向匹配，对字符进行逐个比较；如果不指定第二个参数，includes()方法和startsWith()方法会从字符串起始处开始匹配，endsWith() 则会从字符串末尾处开始匹配。实际上，指定第二个参数会大大减少字符串被搜索的范围。

let msg = 'hello world!';

console.log(msg.startsWith('hello'));//true

console.log(msg.endsWith('!'));//true

console.log(msg.includes('o'));//true

console.log(msg.startsWith('o'));//false

console.log(msg.endsWith('world!'));//true

console.log(msg.includes('x'));//false

console.log(msg.startsWith('o',4));//true

console.log(msg.endsWith('o',8));//true

console.log(msg.includes('o',8));//false

后面3个调用只搜索了字符串的一部分。msg.startsWith('o',4)从字符串的第四位开始匹配。msg.endsWith('o',8)则从字符串索引的7开始匹配（即8-1）。msg.includes('o',8)从字符串索引的第8位开始匹配。

但如果需要在一个字符串中寻找另一个子字符串的实际位置，还需要使用indexOf()或lastIndexOf()方法。

二、repeat（）方法

接受一个数字类型的参数，表示字符串重复次数，返回该字符串重复一定次数后的新字符串。

console.log("x".repeat(3));//xxx

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

console.log("abc".repeat(4));//abcabcabcabc

三、模板字面量

用反撇号（`）代替了单、双引号。

let msg = `hello world`;

console.log(msg);//hello world

console.log(typeof msg);//string

console.log(msg.length);//11

如果在字符串中需要使用反撇号，那么用反斜杠（\）将其转义即可。

let msg = `\`hello\` world!`;

console.log(msg);//`hello` world

console.log(typeof msg);//string

console.log(msg.length);//14

在模板字面量中，是不需要转义单、双引号的。

3.1 多行字符串

如果需要在字符串中添加新的一行，只需在代码中直接换行。

let msg = `multiline

string`;

console.log(msg);//multiline

//string

console.log(msg.length);//16

在反撇号中所有空白符都属于字符串的一部分，所以千万小心缩进。

3.2 字符串占位符

在模板字面量中，可以把任何合法的JS表达式嵌入到占位符中并将其作为字符串的一部分输出到结果中。

占位符由${ }组成。大括号中间可包含任意的JS表达式。

let name = 'lili',

msg = `hello,${name}`;

console.log(msg);//hello,lili

由于模板字面量本身也是JS表达式，所以也可以在一个模板字面量里面嵌入另一个。

let name = 'lili',

msg = `hello,${

`my name is ${name}`

}`;

console.log(msg);//hello,my name is lili

 

PS:本文摘自《深入理解ES6》一书。