ES6——字符串的扩展

参考链接：https://es6.ruanyifeng.com/#docs/string

1、字符串的unicode表示

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

只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。

console.log("\u0061");
// a

(1)如果直接在\u后面跟上超过0xFFFF的数值（比如\u20BB7），JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7

(2)将码点放入大括号，就能正确解读该字符

let hello = 123;
console.log(hell\u{6F}) 
// 123

2、字符串的遍历器接口

（1）字符串可以被for...of循环遍历

for (let char of 'hello') {
  console.log(char)
}
// h e l l o

3、JSON.stringfy()改造

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

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

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

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

4、模板字符串

传统js输出模板

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

 ES6的模板字符串

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

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

注意：在字符串中嵌入变量在实际开发中会用到

// 字符串中嵌入变量
let name = "xiaoming";
console.log(`I am ${name}`);
//I am xiaoming

(1)使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中

(2)模板字符串中嵌入变量，需要将变量名写在${}之中

(3)大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

(4)模板字符串之中还能调用函数

function fn() {
  return "OK";
}

`${fn()}`
//OK

(5)如果模板字符串中的变量没有声明，将报错

// 变量a没有声明
let msg = `Hello, ${a}`;
//ReferenceError: a is not defined

(6)模板字符串甚至还能嵌套

5、标签模板

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

alert`hello`
// 等同于
alert(['hello'])

如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

6、模板字符串限制

标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，导致无法嵌入其他语言。

ES2018 放松了对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义，就返回undefined，而不是报错，并且从raw属性上面可以得到原始字符串。

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