ES6语法总结-字符串的扩展

1、字符的Unicode表示法

• ES6可以使用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点

// 这种表示法仅限于码点在\u0000 ~ \uFFFF之间的字符，超出的字符，必须使用两个双字节的形式表示
"\u0061" // => a

// 如果\u后面跟着超出的0xFFFF的数值，比如\u20BB7，那么JavaScript会理解为\u20BB+7。
// 由于\u20BB不是一个不可打印字符，所以只会显示一个空格后面跟着一个7

// ES6的改进，只要将码点放入大括号中，就能正确解读该字符串
"\u{20BB7}" // "𠮷"

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

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

'u{1F680}' === 'uD83DuDE80' // => true

// 有了这种表示方法之后，JavaScript共有6种方式可以表示一个字符

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

2、字符串的遍历接口

• ES6为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历
• 可以识别打野0xFFFF的码点，传统的for循环无法识别这样的码点

let text = String.fromCodePoint(0x20BB7);

for(let i=0; i<text.length; i++){
    console.log(text[i]);
}
// " "
// " "

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

3、直接输入U+2028和U+2029

• 字符串中可以直接输入字符或者字符的转义形式

"中" === '\u4e2d' // "中"的转义形式是\u4e2d

• 但是JavaScript规定5个字符，不能在字符串里面直接使用，只能使用转义形式

  1. U+005c：反斜杠
  2. U+000D：回车
  3. U+2028：行分隔符
  4. U+2029：段分隔符
  5. U+000A：换行符

  举例来说就是字符串里面不可以直接包含反斜杠，一定要转义写成\或者\u005c

• 问题在于JSON格式允许字符串里面直接使用U+2028（行分隔符）和U+2029（段分隔符）。所以ES2019允许JavaScript字符串直接输入U+2028和u+2029
• 模板字符串现在就允许直接输入这两个字符
• 正则表达式依然不允许直接输入这两个字符

4、JSON.stringify()改造

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

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

5、模板字符串

• 反引号
• 可嵌套
• ${}嵌入变量

6、标签模板

• 标签模板功能：模板字符串可以紧跟一个函数名后面，该函数将被调用来处理这个模板字符串
• 标签模板其实不是模板，而是函数调用的一种形式。”标签“指的是函数，紧跟后面的模板字符串就是他的参数

alert`hello`
// 等同于
alert("hello")

• 如果模板字符串里面有变量，会将模板字符串先处理成多个参数，再调用函数

let a = 3;
let b = 4;

f`Hello ${a+b} world ${a*b}`; // 拆分为了”Hello " " world" 7 12
f(['Hello', 'world'], 7, 12); // 变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推

• “标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容
• 多语言转换（国际化处理）
• 在 JavaScript 语言之中嵌入其他语言