背景
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
早期，由于存储空间宝贵，Unicode 使用 16位二进制 来存储文字。我们将一个 16位二进制编码 叫做 一个码元（Code Unit）。
后来，由于技术的发展，Uincode 对文字编码进行了扩展，将某些文字扩展到了 32位（占用两个码元），并且，将某个文字对应的 二进制数字叫做码点（Code Point）。
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
- 同时，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之前处理字符串繁琐的两个方面：
- 多行字符串
const demo = "hello \n world"
console.log(demo); // hello
// world
- 字符串拼接
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葡萄
- String.raw : 标记模板字符串全部为普通字符，没有特殊或转义字符。
const demo = String.raw`abc \n abc`;
console.log(demo); // abc \n abc
- 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, "<").replace(/>/g, ">");
str += parts[i] + v;
if(i === values.length - 1) {
str += parts[i + 1];
}
}
return str;
}
总结：
在模板字符串书写之前，可以加上标记：
标记名`模板字符串`
标记是一个函数，函数参数如下：
参数1：被插值分割的字符串数组。
后续参数：所有的插值。
