JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。
但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。
ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

字符串的拓展

Unicode 字符表示方法

表示方法

1
2
3
4
5
6
7
8
9
10
{
    console.log('a', `\u0061`); // a
    console.log('s', `\u20BB9`); // ₻8
    // 这里的 20BB8 已经超过了 x0ffff 所以无法正常显示出该字符。
    console.log('s', `\u{20BB9}`); // 𠮹
    // 需要用到 {} 包裹 大于 x0ffff的字符才能解析对应生成的字符。
}

es5 中存在的一些问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
    // es5 中的计算获取字符 和计算字符的编码方法 无法得到正确的结果
    let s1 = '𠮹';
    console.log('length：', s1.length); // 2
    console.log('字符1：', s1.charAt(0)); // � 乱码
    console.log('字符2：', s1.charAt(1)); // � 乱码
    console.log('字符编码1：', s1.charCodeAt(0)); // 57273
    console.log('字符编码2：', s1.charCodeAt(1)); // � 乱码
    // 在处理两个字节字符长度的字符 charAt 和 charCodeAt 是得不到正确的结果的。
    // 现在使用 新增的 codePointAt() 方法 得到字符的编码。
    let s2 = '𠮹a';
    console.log('length:', s2.length); // 3
    console.log('字符1:', s2.codePointAt(0)); // 134073 
    console.log('字符十六进制:', s2.codePointAt(0).toString(16)); // 20bb9
    console.log('字符2:', s2.codePointAt(1)); // 57273
    console.log('字符3:', s2.codePointAt(2)); // 97
    // es5 通过字符编码 获取字符。
    console.log(String.fromCharCode("0x20bb9")); // ஹ
    // es6 通过字符编码 获取字符。
    console.log(String.fromCodePoint("0x20bb9")); // 𠮹
    // 区别在于 能不能获取到2个字节的字符串。
}

of 遍历循环输出

1
2
3
4
5
6
7
8
9
10
11
12
{
    // 普通循环输出字符串
    let str = "\u{20bb9}abc";
    for (let i = 0; i < str.length; i++) {
        console.log(str[i]);  //  �, �, a, b, c
    }
    // 使用 of 遍历循环输出。
    for (let code of str) {
        console.log(code); // 𠮹, a, b, c
    }
}

新增的API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
    let s1 = 'string';
    let s2 = '1';
    // 判断是否包含指定字符串
    console.log('s1', s1.includes('r')) // true
    // 判断是否是以指定字符串开始的 
    console.log('s2', s1.startsWith('st')); // true
    // 判断是否是以指定字符串结束的 
    console.log('s3', s1.endsWith('ng')); // true
    // 重复输出指定的字符串
    console.log('s4', s1.repeat(2)); // stringstring
    // 往前补白字符串 
    console.log('s5', s2.padStart(2, '0')) // 01
    // 往后补白字符串
    console.log('s6', s2.padEnd(2, '0')) // 10
    // 注释：补白字符串 第个参数是补白后的位数，第二个字符串是 需要填补的内容。
    // String.raw 的用法 不转义 \n 等
    console.log(String.raw`Hi\n${1 + 2}`);  // Hi\n3
    console.log(`Hi\n${1 + 2}`);            // Hi 换行 3
}

字符串模板 ${} ``

1
2
3
4
5
6
7
{
    let s1 = 'Hello';
    let s2 = 'Word';
    let sum = `输出：${s1} ${s2}`;
    console.log(sum); // 输出：Hello Word
}

标签模板 如何理解？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    let user = {
        v3: 'v3',
        v2: 'v2',
        v1: 'v1'
    }
    let res = abc`I ${user.v1} am ${user.v2} a ${user.v3}`;
    function abc(str, v1, v2, v3) {
        return str + v1 + v2 + v3;
    }
    console.log(res); // I , am , a ,v1v2v3
    // 以变量间隔中间字符串为第二个参数，
    // 这种类型 的方式 首先输出里面的字符串 最后一个参数字符串中的变量 在一起输出
}