ES6 3. 字符串的扩展

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

1 字符的Unicode表示法

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

"\u0061" // "a"

当超过\u0000~\uFFFF之间的字符后，必须用2个双字节的形式表达

"\uD842\uDFB7" //"吉"

"\u20BB7" //  "7"

上述代码第二个超过了区间，则会理解为\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟一个7。

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

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

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

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

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

最后一个例子表明，大括号表示法与四字节的UTF-16编码是等价的。有了这种表示法之后，JavaScript共有6种方法可以表示一个字符。

'\z' === 'z';
'\172' === 'z';
'\x7A' === 'z';
'\u007A' === 'z';
'\u{7A}' === 'z';

2 codePointAt()

测试一个字符是由2个字节还是4个字节组成的最简单的方法

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

var s = "吉";

s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362 0xD842
s.charCodeAt(1) // 57271 0xDFB7

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

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

var s = '吉a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271 "吉"的后两个字节
s.codePointAt(2) // 97
s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

codePointAt方法会正确返回32位的UTF-16字符的码点，对于2个字节储存的常规字符，它的返回结果与charCodeAt方法相同。为了去掉"吉"与"a"之间的字符，可以使用for...of方式来循环，因为它会正确识别32位的UTF-16字符。

var 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) // ஷ

由于String.fromCharCode不能识别大雨0xFFFF的码点，所以0x20BB7就发生了溢出，最高位2被舍弃，最后返回码点U+0BB7对应的字符。

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

String.fromCodePoint(0x20BB7) // "吉"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true

如果有多个参数，则它们会被合并成一个字符串返回

4 字符串的遍历器接口

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

for(let codePoint of 'foo'){
  console.log(codePoint)
}
// "f"
// "o"
// "o"

同时，可以识别大于0xFFFF的码点。

var text = String.fromCodePoint(0x20BB7);

for(let i = 0; i < text.length; i++){ // 会认为它包含2个字符
  console.log(text[i]);
}
// " "
// " "

for (let i of text){
  console.log(i);
}
// "吉"

5 at()

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

'abc'.charAt(0) // "a"
'吉'.charAt(0) // "\uD842"

提案

通过垫片库(github.com/es-shims/Strngprototype.at)

提出字符串实例的at方法，可以识别Unicode编号大于0xFFFF的字符，返回正确的字符。

'abc'.at(0) // 'a'
'吉'.at(0) // "吉"

6 normalize()

目前不能识别3个及以上字符。

为了表示欧洲语言中的语调符号和重音符号，Unicode提供了两种方法，一种是直接提供带重音符号的字符，比如Ǒ(\u01D1)。另一种是提供合成符号，即原字符与重音符号合成为一个字符，比如O(\u004F)和̌(\u030C)合成的字符。

这两者在视觉和语义上是等价的，但是JavaScript无法识别。

'\u01D1' === '\u004F\u020C' // false

'\u01D1'.length // 1
'\u004F\u020C'.length // 2

因为JavaScript将合成字符视为两个字符，导致两种表示方式不等价。

ES6为字符串实例提供了normalize方法，用来将字符的不同表示方法同一位同样的形式，称为Unicode正规化。

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

参数可选值：

• NFC，默认参数，表示“标准等价合成”，返回多个简单字符的合成字符。即视觉和语义上的等价。
• NFD，表示“标准等价分解”，即在标准等价的前提下，返回合成字符分解出的多个简单字符。
• NFKC，表示“兼容等价合成”，返回合成字符。所谓“兼容等价”指的是语义上等价，但视觉上不等价，比如“囍”和“喜喜”。（normalize方法并不能识别中文）
• NFKD，表示“兼容等价分解”，即在兼容等价的前提下，返回合成字符分解出的多个简单字符。

7 includes()、statsWith()、endsWith()

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

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

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

8 repeat()

返回一个新字符串，表示将原字符串重复n次

repeat(arg)

参数：

• 小数时取整
• 负数或Infinity会报错
• 字符串时，先转换成字符串再重复

9 padStart()、padEnd()

ES2017引入字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。

"x".padStart(5, "ab"); // 'ababx'

"x".padEnd(5, "ab"); // 'xabab'

参数：

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

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

• 省略第二个参数，则会用空格来补全。

用途：

• 补全定位数
• 提示字符串格式

10 模板字符串

传统的JavaScript输出模板通常时这样写的。

$('#result').append(
	'There are <b>' + basket.count + '</b>' + 
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

ES6引入了模板字符串来简化模板

• 可放任意的JavaScript表达式
• 可运算
• 可引用对象属性
• 可调用函数
• 如果是对象，则默认调用toString()方法
• 可嵌套

$('#result').append(`
	There are <b>${basket.count + 1}</b> items
	in your basket, <em>${basket.onSale}</em>
	are on sale!
`);

模板字符串是增强版的字符串，用反引号(`)标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者字符串中嵌入变量。如果表示多行字符串，所有的空格和锁紧都会被保留在输出中，可以用trim去掉。

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

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

如果在字符串中使用反引号，则在其前面使用反斜杠转义。

如果引用模板字符串本身，可以这样写

let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "hello Jack!"

11 String.raw()

用来充当模板字符串的处理函数，返回一个反斜线都被转义的字符串，对应于替换变量后的模板字符串。如果已经转义，则不做任何处理。类似于python的字符串前缀r

String.raw`Hi\u000A!`; // 'Hi\\u000A!'

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

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