字符串的扩展

1.字符的Unicode表示法

ES6要用Unicode表示一个字符，采用\uxxxx形式，但是只限制码点在\u0000~\uFFFF之间的字符，超出了这个范围，比如表示一个汉字，需要用两个双字节的形式表示。

大括号表示法：
对超出双字节的字符，比如\u20BB7，用大括号括起来，\u{20BB7}，就可以正确解读这个字符。

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

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

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

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

2.字符串的遍历器接口

字符串可以解构赋值成数组的形式，所以字符串可以被for…of循环遍历。

for(let i of "hello"){
	console.log(i);  // h e l l o
}

// 对大于\uFFFF的码点进行遍历,比如汉字
let text = String.fromCodePoint(0x20BB7);

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

3.JSON.stringify()的改造

对于这个函数的使用，要注意一个问题。首先，JSON格式数据必须是UTF-8形式的，但是对于0xD800-0xDFFF之间的码点，UTF-8规定不能单独使用，必须配对使用，还不能颠倒顺序，以表示大于0xFFFF的字符，那怎么办呢？ES2019规定，如果遇到0xD800到0xDFFF之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理。

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

4.模板字符串

学过Django的人都应该知道，里面也有一个模板文件，和这个类似，方便后台的数据传输解析。

模板字符串增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。很简单，就不举例子了。

模板字符串有一个trim()方法，可以注意下，用来消除里面的换行。
向其中嵌入变量的话，用${变量名/函数}，为什么可以这样表示？归根于模板字符串大括号的本质就是执行JavaScript代码。

5.标签模板（重要）

标签模板其实不是模板，而是函数调用的一种形式。但是，如果模板里有变量，就不是简单的调用了，而是先将模板字符串处理成多个参数，再调用函数。

// 标签模板其实不是模板，而是函数调用的一种形式
        let a=5,b=10;

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

        function tag(stringArr,value1,value2){
            console.log(stringArr[0]);
            console.log(stringArr[1]);
            console.log(stringArr[2]);
            console.log(value1);
            console.log(value2);

            return "OK";
        }

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。记住这个规律很重要，知道怎么拆开的才能知道怎么按照原来的位置拼合回去。

let sender = '<script>alert("abc")<\/script>';
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {
    let s = templateData[0];
    for (let i = 1; i < arguments.length; i++) {
        let arg = String(arguments[i]);

        // Escape special characters in the substitution.
        s += arg.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;");

        // Don't escape special characters in the template.
        s += templateData[i];
    }
    return s;
}

console.log(message);

这里调试一下会发现，因为templateData是第一个参数，所以接收到的是字符串数组，传过来的值会放在arguments中。其中，第一个字符串数组，有一个raw属性，也是指向同一个数组，只不过raw会自动进行转义。