04字符串的扩展.md

字符串的扩展

1.字符的 Unicode 表示法

JavaScript 共有 6 种方法可以表示一个字符：

1. z：正常字符
2. \z ：正常字符，忽略反斜杠正常显示
3. \172：三个八进制数代表一个字符（范围：000～377）
4. \x7A：两个十六进制数代表一个字符（范围：00～FF）
5. \u007A：四个十六进制数代表一个字符（范围：0000～FFFF）
6. \u{7A}：可表示超出范围FFFF的字符

特点：

1. 可用双字节表示一个字符
2. 当一个字节表示的字符超过范围时，超过范围的不转义

"\uD842\uDFB7"
// "𠮷"

"\u0061"
// a
"\u00610061"
// "a0061"

2.字符串的遍历器接口

字符串具有遍历器接口，可以识别大于0xFFFF的码点。

let text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

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

3.标签模板

模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。 “标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

alert`123`
// 等同于
alert(123)

var a = 5
var b = 10
tag`First line${a + b}\nSecond line${a * b}`

function tag(strings) {
  console.log(strings)
}
// ["First line", "↵Second line", "", raw: ["First line", "\nSecond line", ""]] 15 50

raw属性保存的是转义后的原字符串

4.应用

4.1 过滤HTML字符串

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;
}
let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;

4.2 多语言转换

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"

4.3 语言转换

jsx`
  <div>
    <input
      ref='input'
      onChange='${this.handleChange}'
      defaultValue='${this.state.value}' />
      ${this.state.value}
   </div>
`