【ES6】字符串的扩展

1. 字符的Unicode表示法

ES6加强了对Unicode的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点

'\u0061'
// 'a'

2. 字符串的遍历器接口

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

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

3. JSON.stringify() 的改造

根据标准，JSON 数据必须是 UTF-8 编码。但是现在的JSON.stringify()方法有可能返回不符合 UTF-8 标准的字符串。

具体来说，UTF-8 标准规定，0xD800到0xDFFF之间的码点，不能单独使用，必须配对使用。比如，\uD834\uDF06是两个码点，但是必须放在一起配对使用，代表字符𝌆。这是为了表示码点大于0xFFFF的字符的一种变通方法。单独使用\uD834和\uDFO6这两个码点是不合法的，或者颠倒顺序也不行，因为\uDF06\uD834并没有对应的字符。

JSON.stringify()的问题在于，它可能返回0xD800到0xDFFF之间的单个码点。

JSON.stringify('\u{D834}') // "\u{D834}"

为了确保返回的是合法的 UTF-8 字符，ES2019 改变了JSON.stringify()的行为。如果遇到0xD800到0xDFFF之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理。

JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""

4. 模板字符串

传统的JavaScript语言，输出模板通常是以+拼接

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

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

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

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

模板字符串中还能调用函数

function fn(){
    
    return 'hello world'
}
`foo ${
      fn()} bar`
//foo hello world