背景

const text = "𠮷"; // 占用了两个码元（32位）
console.log("字符串长度：", text.length);  // 字符串长度： 2
console.log("使用正则测试：", /^.$/.test(text)); // 使用正则测试： false

console.log("得到第一个码元：",text.charCodeAt(0)); // 得到第一个码元： 55362
console.log("得到第二个码元：",text.charCodeAt(1)); // 得到第二个码元： 57271

console.log("得到第一个码点：",text.codePointAt(0)); // 得到第一个码点： 134071
console.log("得到第二个码点：",text.codePointAt(1)); // 得到第二个码点： 57271

1. 早期，由于存储空间宝贵，Unicode 使用 16位二进制 来存储文字。我们将一个 16位二进制编码 叫做 一个码元（Code Unit）。

2. 后来，由于技术的发展，Uincode 对文字编码进行了扩展，将某些文字扩展到了 32位（占用两个码元），并且，将某个文字对应的 二进制数字叫做码点（Code Point）。

3. ES6 为了解决这个困扰，为字符串提供了方法：codePointAt 。根据字符串码元的位置得到其码点。

// 判断字符串char，是32位，还是16位
function is32bit(char) {
    // 如果码点大于了16位二进制的最大值，则其是32位的
    return char.codePointAt(0) > 0xffff;
}

console.log(is32bit("𠮷")); // true
console.log(is32bit("a")); // false

得到一个字符串码点的真实长度:

// 得到一个字符串码点的真实长度
function getLengthOfCodePoint(str) {
    var len = 0;
    for(let i = 0; i < str.length; i ++) {
        // i 在索引码元
        if(str.codePointAt(i) > 0xffff) {
            // 当前字符串，在这个位置，占用了两个码元
            i ++;
        }
        len ++;
    }
    return len;
}

console.log(getLengthOfCodePoint("aa𠮷a5")); // 5

4. 同时，ES6为正则表达式添加了一个flag：u 。如果添加了该配置，则匹配时使用码点匹配。

const text = "𠮷";
console.log("使用正则测试：", /^.$/u.test(text)); // 使用正则测试： true

字符串 API

以下均为字符串的实例（原型）方法。

1. includes : 判断字符串中是否包含指定的子字符串。

includes(str, index);

第二个参数index表示从哪个位置开始查找。

const text = "abc";

console.log(text.includes("c")); // true
console.log(text.includes("f")); // false

console.log(text.includes("a", 0)); // true
console.log(text.includes("b", 0)); // true
console.log(text.includes("b", 2)); // false

2. startsWith : 判断字符串中是否以指定的字符串开始。

startsWith(str, index);

第二个参数index表示从哪个位置开始是否是以str开头。

const text = "abc是";

console.log(text.startsWith('a')); // true
console.log(text.startsWith("f")); // false

console.log(text.startsWith('c', 2)); // true
console.log(text.startsWith("c", 1)); // false

3. endsWidth : 判断字符串中是否以指定的字符串结尾。

const text = "abc是";

console.log(text.endsWith("a")); // false
console.log(text.endsWith("是")); // true

4. repeat : 将字符串重复指定的次数，返回新的字符串。

const text = "abc是";

console.log(text.repeat(2)); // abc是abc是
console.log(text.repeat(1)); // abc是

正则中的粘连标记

标记名：y

含义：匹配时，完全按照正则对象中的lastIndex位置开始匹配，并且匹配的位置必须在lastIndex位置。

const text = "hello world";

const reg = /w\w+/y;

reg.lastIndex = 6;

console.log(reg.test(text)); // true
console.log(reg.lastIndex);

模板字符串

ES6之前处理字符串繁琐的两个方面：

1. 多行字符串

const demo = "hello \n world"

console.log(demo); // hello 
                   // world

2. 字符串拼接

const a = 123;
const demo = "hello "+ a +"world";

console.log(demo); // hello 123world

在ES6中，提供了模板字符串的书写，可以非常方便换行和拼接，要做的，仅仅是将字符串的开始或结尾改完 ``符号。

const demo = `hello 
world`;

console.log(demo); // hello 
                   // world

如果要在字符串中拼接js表达式，只需要在模板字符串中使用 ${js表达式}。表达式可以是任何有意义的数据，表达式可以嵌套。

const a = 123;
const demo = `hello ${a} world`;

console.log(demo); // hello 123 world

模板字符串标记

实现方式：

const love1 = "苹果";
const love2 = "葡萄";

const demo = myTag`我喜欢吃 ${love1} ，也喜欢吃 ${love2}`;

// 相当于：demo = myTag(["我喜欢吃","也喜欢吃",""], "苹果", "葡萄")

function myTag(parts) {
    console.log(parts); // ["我喜欢吃 ", " ，也喜欢吃 ", ""]
    console.log(arguments); // 0: (3) ["我喜欢吃 ", " ，也喜欢吃 ", "", raw: Array(3)]   1: "苹果"  2: "葡萄"

    const values = Array.prototype.slice.apply(arguments).slice(1);

    console.log(values); //  ["苹果", "葡萄"]

    // parts.length = values.length + 1;

    let str = "";
    for(let i = 0; i < values.length; i ++) {
        str += parts[i] + "a" + values[i];
        if(i === values.length - 1) {
            str += parts[i + 1];
        }
    }
    return str;
}

console.log(demo); // 我喜欢吃 a苹果 ，也喜欢吃 a葡萄

1. String.raw : 标记模板字符串全部为普通字符，没有特殊或转义字符。

const demo = String.raw`abc \n abc`;

console.log(demo); // abc \n abc 

2. safe : 对危险内容进行转义。

未标记前：

<p>
    <input type="text" id="text">
    <button id="btn">设置div的内容</button>
</p>
<div id="container"></div>

const container = document.getElementById("container");
const text = document.getElementById("text");
const btn = document.getElementById("btn");

btn.onclick = function() {
    container.innerHTML = `<p>
                            ${text.value}
                        </p>`
}

标记后：

const container = document.getElementById("container");
const text = document.getElementById("text");
const btn = document.getElementById("btn");

btn.onclick = function() {
    container.innerHTML = safe`<p>
                            ${text.value}
                        </p>`
}

function safe(parts) {
    const values = Array.prototype.slice.apply(arguments).slice(1);

    let str = "";
    for(let i = 0; i < values.length; i ++) {
        const v = values[i].replace(/</g, "&lt;").replace(/>/g, "&gt;");

        str += parts[i] + v;
        if(i === values.length - 1) {
            str += parts[i + 1];
        }
    }
    return str;
}

总结：

在模板字符串书写之前，可以加上标记：

标记名`模板字符串`

标记是一个函数，函数参数如下：

• 参数1：被插值分割的字符串数组。

• 后续参数：所有的插值。