【ES6读书笔记】字符串的扩展

423 阅读3分钟

一、字符串的Unicode表示法

JavaScript允许采用 \uXXXX形式表示一个字符(XXXX表示字符的Unicode码点),但是这种表示法只限于码点在 \u0000 - \uFFFF 之间的字符,超过这个范围的字符,必须用2个双字节的形式表达

let a = "\u0061";
a // "a"

let b = "\uD842\uDFB7";

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

image.png

二、codePointAt()

JavaScript内部,字符以UTF-16的格式储存,每个字符固定为2个字节。对于需要4个字节储存的字符(Unicode码点大于0xFFFF的字符),JavaScript会认为它们是2字个符

codePointAt方法会正确返回32位的UTF-16字符的码点(10进制),对于2个字节存储的常规字符,它的返回结构与charCodeAt方法相同

var ch = "𠮷";  // 需要4个字节储存的非常规字符
ch.length       // 2  字符串长度被误判为 2 

var s = "𠮷a";    // 
s.charPointAt(0); // 134071 正确返回了第一个字符的码点
s.charPointAt(1); // 57271
s.charPointAt(2); // 97     a的十进制值为 97

charPointAt(0)正确处理了字符"𠮷",但是由于JavaScript依然将该该字符的长度识别的2,所以要下标为2才能正确识别后续字符,此例中字符a所在下标为2

三、String.fromCodePoint()

ES6提供String.fromCodePoint(),可以识别大于0xFFFF的字符,该方法返回码点所对应的字符

image.png

如果String.fromCodePoint()有多个参数,则它们会被合并成一个字符串返回

四、字符串的遍历器接口

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

image.png

for...of遍历器可以识别大于0xFFFF的码点

五、includes()、startsWith()、endsWith()

JavaScript中indexOf方法可用来确定一个字符串是否包含在另一个字符串中

ES6提供了3种新方法:

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

这三种方法都支持第二个参数,表示开始搜索的位置,endsWidth(str, n)针对的是前n个字符,其它两个方法表示的是从第n个位置到字符串结束位置之间的字符

六、repeat()

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

image.png

- 参数如果是小数,会被向下取整
- 参数如果 <= -1 或为 Infinity,会报错
- 参数如果是(-1,1)开区间,repeat视同为0
- 参数NaN、null、undefined,等同于0
- 参数是字符串,会先转换为数字

七、padStart()、padEnd()

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

padStart()、padEnd()分别接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数则用来补全字符串

image.png

- 如果原字符串的长度>=指定的长度,则返回原字符串
- 如果用来不全的字符串与原字符串长度之和超过了最小长度,则会截去超出位数的补全字符串
- 如果省略第二个参数,则会用空格来补全

八、模板字符串

ES6用反引号(``)来定义多行字符串,或者在字符串中嵌入变量

image.png

- 模板字符串表示多行字符串,所有的空格和缩进都会被保留进输出中
- 模板字符串中可以嵌入变量、表达式、调用函数等,需要将其写在 ${} 中
- 大括号中的值如果不是字符串,将按一般规则转换为字符串
- 模板字符串中还能再次嵌套