es6 字符串扩展

2019-04-03 本文已影响0人 Xu涵

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

1. 字符的Unicode表示法

js允许用\uxxxx来表示一个字符，但只限于码点在\u0000~\uFFFF之间，超出这个范围的字符可用两个双字节表示。

如果\u后面加超过0xFFFF的数值，js会理解成一个码点和一个字符，比如\u20BB7会理解成\u20BB+7，打印出“7”

但是如果加了大括号，如\u{20BB7}就能正确解读字符

"\u{20BB7}"
// "𠮷"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

2. codePointAt()

js内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。

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

结果：ES6提供了codePointAt方法，能正确处理四个字节存储的字符，返回一个字符的码点（十进制）

codePointAt方法：这个方法的参数是字符在字符串中的位置，如果一个汉字占了两个字符，那么0代表汉字的前两个字节，1代表汉字的后两个字节

如果想要将这个函数返回的十进制数转换成十六进制，可以使用toString方法
```
let s = '𠮷a';

s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"
```
注意:codePointAt方法传入的序号有时候是不正确的（比如上面代码中a的序号应该是1），为了解决这个问题，可以使用for...of循环
```
let s = '𠮷a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61
```

3. String.fromCodePoint()

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

String.fromCharCode(0x20BB7)
// "ஷ"

ES6提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符

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

4. 字符串的遍历器接口

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

优点：for...of可以识别大于0xFFFF的码点，但for循环不行

5. normalize()

Unicode提供了两种方法用来表示语调符号和重音符号。一种是直接提供重音符号的字符，另一种是提供合成符号

JavaScript将合成字符当成两个字符，所以虽然用两种方法可以表示同一个字符，但实际上JavaScript是识别不了的

ES6提供normalize()方法来解决上述问题

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true

normalize方法可以接受一个参数指定方式，参数可选值如下：

NFC，默认参数，表示“标准等价合成”，返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。
NFD，表示“标准等价分解”，即在标准等价的前提下，返回合成字符分解的多个简单字符。
NFKC，表示“兼容等价合成”，返回合成字符。所谓“兼容等价”指的是语义上存在等价，但视觉上不等价，比如“囍”和“喜喜”。
NFKD，表示“兼容等价分解”，即在兼容等价的前提下，返回合成字符分解的多个简单字符。

6. includes(),startsWith(),endsWith()

除了indexOf方法可以用来确定一个字符串是否包含在另一个字符串中，还有另外三种方法：

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

这三个方法都支持第二个参数，表示开始搜索的位置。但是endwith针对的是前n个字符。

7. repeat()

这个方法返回一个新字符串，表示将原字符串重复n次。参数可能情况如下：

如果参数是小数，小数会被取整。
如果参数是负数，会报错
如果参数是零到负一之间的小数，等同于零
如果是NaN也等同于零
如果参数是字符串，会先转换成数字

'x'.repeat(3) // "xxx"
'na'.repeat(2.9) // "nana"
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""

8. padStart()，padEnd()

这两个方法用于补全字符串，padStart()用于头部补全，padEnd()用于尾部补全。

这两个方法一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果第二个参数省略，默认用空格补全长度

9. 模板字符串

模板字符串（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}?`

如果在多行文本中消除换行，可以使用trim消除

在${}中可以使用字符串、变量和表达式，也可以调用函数

模板字符串能嵌套，可以在模板字符串的变量之中，嵌入了另一个模板字符串，如下：

const tmpl = addrs => `
  
  ${addrs.map(addr => `
    
  `).join('')}
  ${addr.first}
    ${addr.last}
`;

const data = [
    { first: '', last: 'Bond' },
    { first: 'Lars', last: '' },
];

console.log(tmpl(data));
// 
//
//   
//   
//
//   
//   
//
// BondLars

10. 标签模板

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

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

如果模板字符里面有变量，会将模板字符串先处理成多个参数再调用函数。下面这个函数的第一个参数是一个数组，其他参数都是模板字符串被替换后的值

let a = 5;
let b = 10;

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

标签模板可以用来过滤掉HTML字符串，防止用户恶意输入

11. String.raw()

这个方法用来充当模板字符串的处理函数,返回一个斜杠都被转义的字符串，对应于替换变量后的模板字符串。

这个方法也可以作为正常函数使用，它的第一个参数是一个具有raw属性的对象，且raw属性的值应该是一个数组。

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

12. 模板字符串的限制

模板字符串默认会将字符串转义，导致无法嵌入其他语言，如下：

function latex(strings) {
  // ...
}

let document = latex`
\newcommand{\fun}{\textbf{Fun!}}  // 正常工作
\newcommand{\unicode}{\textbf{Unicode!}} // 报错
\newcommand{\xerxes}{\textbf{King!}} // 报错

Breve over the h goes \u{h}ere // 报错
`

ES2018放松了对标签模板里面的字符串转义限制，遇到不合法字符就返回undefined，并且从raw属性上面可以得到元字符串

但是，这种对字符串转义的放松，只在标签模板解析字符串时生效，不是标签模板的场合，依然会报错。