ES6之字符串的扩展

• 字符串的扩展
  • 关键的扩展点及其示例：
    • Unicode 表示与处理
      • JavaScript 共有6种方法可以表示一个字符。
      • codePointAtpos：
      • String.fromCodePoint…codePoints：
    • **字符串的遍历 for … of **
    • 字符串方法的增强
      • includessearchString[, position]：
      • startsWithsearchString[, position]：
      • endsWithsearchString[, length]：
      • 第二个参数
    • 字符串的重复
      • repeatcount：
    • 字符串的补全
      • padStarttargetLength[, padString] 和 padEndtargetLength[, padString]：
    • 模板字符串（Template Literals）
      • 过滤 HTML 字符串，防止用户输入恶意内容
      • 多语言转换（国际化处理）

1. 字符串的扩展

ES6 加强了对 Unicode 的支持，并且扩展了字符串对象。

ES6（ECMAScript 2015）对字符串类型进行了显著的扩展，引入了许多新的方法和特性，提高了处理字符串的便利性和效率。

1.1. 关键的扩展点及其示例：

1.1.1. Unicode 表示与处理

ES5中，这种表示法只限于码点在 \u0000 ~ \uFFFF 之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。

"\uD842\uDFB7"
// ""
"\u20BB7"
// " 7"

上面代码表示，如果直接在 \u 后面跟上超过 0xFFFF 的数值（比如\u20BB7 ），JavaScript会理解成 \u20BB+7 。由于 \u20BB 是一个不可打印字符，所以只会显示一个空格，后面跟着一个 7 。

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

"\u{20BB7}"
// ""

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

上面代码中，最后一个例子表明，大括号表示法与四字节的 UTF-16 编
码是等价的。

1.1.1.1. JavaScript 共有6种方法可以表示一个字符。

'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

1.1.1.2. codePointAt(pos)：

返回字符串中指定位置的 Unicode 码点。

let str = "𠮷";
console.log(str.codePointAt(0)); // 正确输出大于0xFFFF的码点

1.1.1.3. String.fromCodePoint(...codePoints)：

从一系列 Unicode 码点创建字符串。

console.log(String.fromCodePoint(0x20BB7)); // 输出: "𠮷"

1.1.2. **字符串的遍历 for … of **

引入了迭代器接口，可以直接用for…of循环遍历字符串中的每个字符（包括 surrogate pairs）。

let str = "hello";
for (let char of str) {
  console.log(char);
}

1.1.3. 字符串方法的增强

1.1.3.1. includes(searchString[, position])：

判断字符串是否包含某个子串，返回布尔值。

let str = "Hello world";
console.log(str.includes("world")); // 输出: true

1.1.3.2. startsWith(searchString[, position])：

判断字符串是否以指定的子串开始，返回布尔值。

console.log(str.startsWith("Hello")); // 输出: true

1.1.3.3. endsWith(searchString[, length])：

判断字符串是否以指定的子串结束，返回布尔值。

console.log(str.endsWith("world")); // 输出: true

1.1.3.4. 第二个参数

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数 n 时， endsWith 的行为与其他两个方法有所不同。它针对前 n 个字符，而其他两个方法针对从第 n 个位置直到字符串结束。

1.1.4. 字符串的重复

1.1.4.1. repeat(count)：

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

let str = "abc";
console.log(str.repeat(3)); // 输出: "abcabcabc"

1.1.5. 字符串的补全

1.1.5.1. padStart(targetLength[, padString]) 和 padEnd(targetLength[, padString])：

在字符串的开头或结尾补全指定的字符，直到达到指定长度。

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。 padStart() 用于头部补全， padEnd() 用于尾部补全。

padStart 和 padEnd 一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

console.log("foo".padStart(5, '0')); // 输出: "00foo"
console.log("foo".padEnd(5, '0')); // 输出: "foo00"

1.1.6. 模板字符串（Template Literals）

使用反引号（`）定义，允许直接嵌入变量和表达式，以及多行字符串。

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

1.1.6.1. 过滤 HTML 字符串，防止用户输入恶意内容

let message =
SaferHTML`<p>${sender} has sent you a message.</p>`;
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;
}

上面代码中， sender 变量往往是用户提供的，经过 SaferHTML 函数处理，里面的特殊字符都会被转义。

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

message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent
you a message.</p>

1.1.6.2. 多语言转换（国际化处理）

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

模板字符串本身并不能取代Mustache之类的模板库，因为没有条件判断和循环处理功能.

这些扩展极大地丰富了JavaScript处理字符串的能力，使得字符串操作更加灵活和强大。