ES6——字符串正则

一、更好的Unicode支持

1.长度

早期，由于存储空间宝贵，Unicode使用16位二进制来存储文字。我们将一个16位的二进制编码叫做一个码元（Code Unit）。
后来，由于技术的发展，Unicode对文字编码进行了扩展，将某些文字扩展到了32位（占用两个码元），并且，将某个文字对应的二进制数字叫做码点（Code Point）。

const text = "𠮷"; //占用了两个码元（32位）
const size = '雷'; //一个码元（16为）
console.log("字符串长度：", text.length);
console.log("字符串长度：", size.length);

2.正则

const text = "𠮷"; //占用了两个码元（32位）
const size = '雷'; //一个码元（16为）
console.log("使用正则测试：", /^.$/.test(text));
console.log("使用正则测试：", /^.$/.test(size));

const text = "𠮷"; //占用了两个码元（32位）
const size = '雷'; //一个码元（16为）
console.log("使用正则测试：", /^.$/u.test(text));//因为'𠮷'的Unicode编码大于\uFFFF
console.log("使用正则测试：", /^.$/u.test(size));//u修饰符能够正确处理大于\uFFFF的Unicode字符

3.码元码点

这里提供两个实例方法charCodeAt与codePointAt。
相同点： charCodeAt与codePointAt都是字符串实例的方法，用途都是返回指定索引位字符的Unicode编码
不同点：charCodeAt与codePointAt匹配索引位的规则不一样，charCodeAt是根据码元来匹配，而codePointAt是根据码点来进行匹配的

//𠮷：\ud842\udfb7
console.log("得到第一个码元：", text.charCodeAt(0));
console.log("得到第二个码元：", text.charCodeAt(1));
console.log("得到第一个码元：", text.charCodeAt(0).toString(16));
console.log("得到第二个码元：", text.charCodeAt(1).toString(16));
console.log("得到第一个码点：", text.codePointAt(0));
console.log("得到第二个码点：", text.codePointAt(1));

4.获取码元码点长度

function is32bit(char, i) {
    //如果码点大于了16位二进制的最大值，则其是32位的
    return char.codePointAt(i) > 0xffff;
}
function getLengthOfCodePoint(str) {
    var len = 0;
    for (let i = 0; i < str.length; i++) {
        //i在索引码元
        if (is32bit(str, i)) {
            //当前字符串，在i这个位置，占用了两个码元
            i++;
        }
        len++;
    }
    return len;
}
console.log("𠮷是否是32位的：", is32bit("𠮷", 0))
console.log("ab𠮷ab的码点长度：", getLengthOfCodePoint("ab𠮷ab"))

二、字符串实例

1.includes

判断字符串中是否包含指定的子字符串

const text = "成哥是狠人";
console.log("是否包含“狠”：", text.includes("狠"));//true

2.startsWith

判断字符串中是否以指定的字符串开始
参数选择开始的位子（对应index）

const text = "成哥是狠人";
console.log("是否以“成哥”开头：", text.startsWith("成哥",参数));//true
console.log("是否以“雷哥”开头：", text.startsWith("雷哥"));//false

3.endsWith

判断字符串中是否以指定的字符串结尾

const text = "成哥是狠人";
console.log("是否以“狠人”结尾：", text.endsWith("狠人"));//true
console.log("是否以“狼人”结尾：", text.endsWith("狼人"));//false

4.repeat

将字符串重复指定的次数，然后返回一个新字符串。

const text = "成哥是狠人";
console.log("重复4次：", text.repeat(4));

三、正则中的粘连标记

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

const text = "Hello World!!!";
const reg = /W\w+/y;
reg.lastIndex = 6;
console.log("reg.lastIndex:", reg.lastIndex)
console.log(reg.test(text));//true

四、模板字符串

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

1. 多行字符串
2. 字符串拼接

在ES6中，提供了模板字符串的书写，可以非常方便的换行和拼接，要做的，仅仅是将字符串的开始或结尾改为 ` 符号。
如果要在字符串中拼接js表达式，只需要在模板字符串中使用${JS表达式}

var love1 = "秋葵";
var love2 = "香菜";
var text = `邓哥喜欢${love1}
邓哥也喜欢${love2}
表达式可以是任何有意义的数据${1 + 3 * 2 / 0.5}
表达式是可以嵌套的：${`表达式中的模板字符串${love1 + love2}`}
\n\n
奥布瓦的发顺丰
在模板字符串中使用\${JS表达式}可以进行插值
`;
console.log(text);

五、模板字符串标记

1.问题

<p>
    <textarea id="txt"></textarea>
    <button id="btn">设置div的内容</button>
</p>
<div id="container"></div>
<script>
	const container = document.getElementById("container");
	const txt = document.getElementById("txt");
	const btn = document.getElementById("btn");
	btn.onclick = function(){
	    container.innerHTML = txt.value;
	}
</script>

会将输入的标签变成网页的节点。

2.解决

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

标记名`模板字符串`

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

1. 参数1：被插值分割的字符串数组
2. 后续参数：所有的插值

btn.onclick = function(){
    container.innerHTML = safe`
        ${txt.value}
    `;
}
function safe(parts){
	console.log(parts);
    console.log(Array.prototype.slice.apply(arguments).slice(1));
    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;
}