ES6入门 （三）字符串的扩展

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、字符的 Unicode 表示法

1.什么是Unicode

因为 ASCII 码一共只定义了 128个字符，只能够满足英文中的字符，对于其他语言，这是远远不够的，于是为了统一全世界的标准，Unicode出现了，Unicode定义了世界上所有语言的所有字符。Unicode没有规定字符对应的二进制码如何存储，也就是说Unicode有很多种编码方式，例如我们常用的UTF-8。

2.Unicode表示法

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

"\u0061" // a

但是这种表示法只局限于码点在 \u0000~\uffff 之间的字符，超出这个范围的字符，必须用两个双字节的形式表示
“\uD842\uDFB7”
// “𠮷”

"\u20BB7"
// " 7"  这里是因为如果在\u后面跟上超过0xFFFF的数值 
// 比如 \u20BB7 (5位数惹) js会理解成 \u20BB + 7 
// 又因为前面那个字符是一个不可打印字符，
// 所以只会显示一个空格，后面再加一个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编码是等价的

3.JS表示字符的6种方法

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

二、字符串的遍历器接口

ES6为字符串添加了遍历器接口 使得字符串可以被for … of 来遍历

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

除了遍历字符串，这个遍历器最大的优点是可以识别大于 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);
}
// "𠮷" 可以识别

三、\u2028 和 \u2029

js字符串允许直接输入字符，以及输入字符的转义形式，即

'中' === '\u4e2d' // true

但是，js规定有5个字符，不能再字符串里面直接使用，只能使用转义形式

• U+005C：反斜杠
• U+000D：回车
• U+2028：分隔符
• U+2029：段分割符
• U+000A：换行符

就是，字符串里面不能直接包含这些个字符，比如不能直接包含反斜杠，必须要转义写成 \\ 或者 \u005c

这个规定本身妹有问题，麻烦在于json格式允许字符串直接使用U+2028（行分隔符）和U+2029（段分隔符）。这样一来，服务器输出的json被json.parse解析，就有可能直接报错

const json = '"\u2028"';
JSON.parse(json); // 可能报错

JSON 格式已经冻结，没法修改，为了消除这个报错，ES2019预计允许js字符串直接输入U+2028(行分隔符)和U+2029（分隔符）

const PS = eval("'\u2029'"); 不会报错

注意，模板字符串现在就允许直接输入这两个字符。另外，正则表达式依然不允许直接输入这两个字符，这是没有问题的，因为 JSON 本来就不允许直接包含正则表达式。

四、JSON.stringify() 的改造

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

具体来说，UTF-8标准规定，0xD800到0xDFFF之间的码点，不能单独使用，必须配对使用，代表字符：𝌆 这是为了表示码点大于0xFFFF的字符的一种变通方法。单独使用这个区间的码点是不合法的，颠倒顺序也不行！

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

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

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

五、模板字符串

传统的js语言，输出模板通常是这样写的

$('#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!
`);

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

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

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
// 如果不想要换行可以使用trim方法来消除！
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量，需要将变量名写在 ${} 之中
大括号内部可以放入任意的js表达式，可以进行运算，以及引用对象的属性

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

如果大括号中的值不是字符串，将按照一般规则转为字符串。比如大括号中是一个对象，将默认调用对象的toString方法

如果模板字符串中的变量妹有声明，将报错

模板字符串还能嵌套

如果需要引用模板字符串本身，在需要时执行，可以写成函数

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"  执行后会返回该字符串

模板编译，通过模板字符串，编译生成正式模板

function compile(template){
  const evalExpr = /<%=(.+?)%>/g;
  const expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  let script =
  `(function parse(data){
    let output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}

let parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>

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

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

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

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

let a = 5;
let b = 10;

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

标签模板的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容
另一个应用，就是多语言转换

模板字符串的限制

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

---

总结

本文主要介绍了ES6中关于字符串的扩展，包括字符的Unicode表示法、字符串的遍历器接口、\u2028 \u2029的问题、JSON.stringify()、模板字符串、标签模板。