JavaScript 中的 Unicode 与字符串处理：码点、代理对与规范化算法

1. 描述

JavaScript 使用 UTF-16 编码来表示字符串，每个字符在内部被存储为一个或两个 16 位码元（code unit）。这种编码方式会导致一些复杂的处理问题，特别是处理 Unicode 范围在 U+10000 到 U+10FFFF 之间的字符时，因为它们需要两个码元来表示，称为“代理对”。理解 JavaScript 如何处理 Unicode 字符，包括码点、代理对、规范化等，是写出健壮的国际化和本地化应用的关键。

2. 核心概念详解

2.1 码点与码元

• 码点：是 Unicode 标准中为每个字符分配的唯一数字标识，范围从 0x0 到 0x10FFFF。例如，字母 "A" 的码点是 0x0041。
• 码元：是文本编码系统中最小的可寻址单元。在 UTF-16 中，一个码元是 16 位。对于基本多文种平面（BMP，U+0000 到 U+FFFF）的字符，一个码点对应一个码元；对于补充平面（U+10000 到 U+10FFFF）的字符，一个码点对应两个码元（代理对）。

2.2 代理对

• 当码点超过 0xFFFF 时，UTF-16 使用两个码元来编码。规则如下：
  1. 高代理码元：范围 0xD800 到 0xDBFF。
  2. 低代理码元：范围 0xDC00 到 0xDFFF。
• 例如，字符 "😀"（咧嘴笑表情）的码点是 0x1F600，在 UTF-16 中被编码为高代理码元 0xD83D 和低代理码元 0xDE00。

3. JavaScript 中的字符串处理

3.1 字符串长度问题

console.log("😀".length); // 输出 2，因为字符串 "😀" 在内部存储为两个码元
console.log("A".length);  // 输出 1

• .length 属性返回字符串中的码元数量，而不是字符数。这对于包含代理对的字符串可能会产生意外结果。

3.2 遍历字符串的正确方法

• 错误的遍历（使用索引）：

let emoji = "😀";
for (let i = 0; i < emoji.length; i++) {
  console.log(emoji[i]); // 输出: � �（乱码，因为分割了代理对）
}

• 正确的遍历方法：
  1. 使用 for...of 循环（支持 Unicode）：

  for (let char of emoji) {
    console.log(char); // 输出: 😀
  }
  

  2. 使用扩展运算符（...）：

  [...emoji].forEach(char => console.log(char)); // 输出: 😀
  

4. Unicode 规范化

• Unicode 允许某些字符有多种表示方式。例如，字母 "é" 可以表示为：
  • 单一码点 U+00E9（带重音的拉丁小写字母 e）。
  • 组合形式：字母 "e"（U+0065） + 重音符号 "´"（U+0301）。
• 这会导致字符串比较和排序的问题，因为两种表示形式看起来相同，但码点不同。

4.1 规范化形式

Unicode 标准定义了四种规范化形式：

• NFC：使用最短的表示形式，如果可能，将组合字符合并。
• NFD：将组合字符分解为基字符和组合标记。
• NFKC 和 NFKD：除了规范化，还处理兼容字符（如全角字母）。

4.2 在 JavaScript 中规范化

• ES6 引入了 String.prototype.normalize() 方法：

let s1 = '\u00E9';        // "é"
let s2 = '\u0065\u0301';  // "é"（组合形式）
console.log(s1 === s2);                 // false
console.log(s1.normalize() === s2.normalize()); // true（使用 NFC）
console.log(s1.normalize('NFD') === s2.normalize('NFD')); // true

5. 处理码点的工具方法

• ES6 提供了处理码点的方法：
  1. String.fromCodePoint()：从码点创建字符串（支持所有 Unicode）。

  console.log(String.fromCodePoint(0x1F600)); // "😀"
  

  2. String.prototype.codePointAt()：返回指定位置的码点（正确处理代理对）。

  console.log("😀".codePointAt(0)); // 128512（0x1F600）
  

  3. String.prototype.at()：返回指定位置的字符（支持 Unicode，实验性 API）。

  console.log("😀".at(0)); // "😀"
  

6. 正则表达式与 Unicode

• ES6 引入了 u 标志，使正则表达式支持 Unicode 模式：

console.log(/^.$/.test("😀")); // false（默认匹配码元）
console.log(/^.$/u.test("😀")); // true（匹配码点）

• 使用 \p{...} 匹配 Unicode 属性：

console.log(/\p{Emoji}/u.test("😀")); // true
console.log(/\p{Script=Greek}/u.test("α")); // true

7. 实际应用建议

1. 当处理可能包含代理对的字符串时，避免使用 .length 判断字符数，使用扩展运算符或迭代器。
2. 在比较或排序国际化字符串前，先进行规范化。
3. 使用 for...of 循环或 Array.from() 安全遍历字符串。
4. 在正则表达式中使用 u 标志以正确处理 Unicode 字符。

理解这些 Unicode 处理机制，能帮助你写出更健壮、支持国际化的 JavaScript 代码。