es6入门之二——字符串的扩展

本文参考自《ECMAScript 6 入门》——阮一峰

 

ES6加强了对Unicode的支持，并且扩展了字符串对象。

1.字符串的Unicode表示法

js允许采用\uxxxx形式表示一个字符，其中“xxxx”表示字符的码点。

但是，这种表示法只限于\u0000——\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表达(比如一些生僻字)。

 

同时：

如果直接在\u后面跟上超过0xFFFF的数值（比如\u20BB7）,js会理解成“\u20BB+7”。

ES6对这点做出了改进，只要将码点放入大括号，就能正确解读该字符。

 

 

有了这种表示法后，JS共有6种方法可以表示一个字符。

'\z' === 'z';//true
'\172' === 'z';//true   8进制
'\x7A' === 'z';//true   16进制
'\u007A' === 'z';//true  UTF-16编码
'\u{7A}' === 'z';//true  大括号表示法

 

2.codePointAt()

js内部，字符以UTF-16的格式存储，每个字符固定为2个字节，对于那些需要4个字节存储的字符（unicode码点大于0xFFFF的字符），JS会认为它们是两个字符。

 

汉字“?”的码点是0x20BB7,UTF-16的编码为0xD842 0xDFB7(十进制为55362 57271)，需要4个字节存储。对于这种4个字节的字符，JS不能正确处理，字符串长度会误判为2，而且charAt方法无法读取整个字符，charCodeAt方法只能分别返回前两个字节和后两个字节的值。

ES6提供了codePointAt方法，能够正确处理4个字节储存的字符，返回一个字符的码点。

codePointAt方法的参数，是字符在字符串中的位置（从0开始）。上面的代码中，js将“?a”视为3个字符，codePointAt方法在第一个字符上，正确的识别了“?”，返回了它的十进制码点134071（即16进制20BB7）。在第二个字符（即“?”的后两个字节）和第三个字符“a”上，codePointAt方法的结果与charCodeAt方法相同。

codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换。

codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

 

3.String.fromCodePoint()

ES5提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（unicode编号大于0xFFFF）。

ES6提供了String.fromCodePoint方法可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足，在作用上，正好与codePointAt方法相反。

如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。

注意：fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。

 

4.字符串的遍历接口

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

 除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

 

 

6.at()

 ES5对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。

ES7提供了字符串实例的at方法，可以识别unicode编号大于0xFFFF的字符，返回正确的字符，Chrome浏览器已经支持该方法。

7.normalize()

为了表示语调和重音符号，unicode提供了两种方法。一种是直接提供带重音符号的字符

另一种是提供合成符号，即原字符与重音符号的合成，两个字符合成一个字符，比如（\u004f）和（\u030c）合成（\u004f\u030c） 

(不知道为什么我单独的\u030c显示不出来，，，)

这两种方法在视觉和语义上都等价，但是js不能识别。

 

上面代码表示，js将合成字符视为两个字符，导致两种表示方法不相等。

ES6提供字符串实例的normalize()方法，用来将字符的不同表示方法统一为同样的形式，这称为unicode正规化。

normalize方法可以接受4个参数。

7.includes(),startsWith(),endsWith()

传统上，js只有indedOf方法，可以用来确定一个字符串是否包含在另一个字符串中，ES6又提供了三种新方法。

——includes():返回布尔值，表示是否找到了参数字符串。

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

——endsWith():返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = "hello world!";
s.startsWith('hello');//true
s.endsWith('!');//true
s.includes('o');//true

 这三个方法都支持第二个参数，表示开始搜索的位置。

var s = "hello world！";
s.startsWith('world',6);//true
s.endsWith('hello',5);//true
s.includes('hello',5);//false

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

8.repeat()