JavaScript 中的 Unicode 代理对与字符串索引的陷阱

一、问题描述

JavaScript 字符串以 UTF-16 编码存储，每个字符使用 1-2 个 16 位代码单元（code unit）。然而，当字符串包含 Unicode 辅助平面字符（码点超过 0xFFFF）时，这些字符需要用两个代码单元表示，称为“代理对”。这会导致字符串长度、索引访问、遍历等操作出现意外结果。

二、核心概念

1. 码点：Unicode 字符的唯一数字编号，范围 0x000000 到 0x10FFFF。
   • 基本平面（BMP）：0x0000 - 0xFFFF，用一个 UTF-16 代码单元表示。
   • 辅助平面：0x10000 - 0x10FFFF，用两个 UTF-16 代码单元（即一个代理对）表示。
2. 代理对结构：
   • 高位代理：0xD800 - 0xDBFF
   • 低位代理：0xDC00 - 0xDFFF
   • 两个代理合在一起表示一个辅助平面字符。

三、常见陷阱与示例

陷阱 1：字符串长度计算错误

const emoji = "😀"; // 码点 U+1F600
console.log(emoji.length); // 2（实际上是一个字符）

• 原因：length 统计的是 UTF-16 代码单元数量，不是字符数。

陷阱 2：索引访问得到无效字符

const emoji = "😀";
console.log(emoji[0]); // "\ud83d"（无效的半字符）
console.log(emoji[1]); // "\ude00"（无效的半字符）

• 索引访问基于代码单元，拆分代理对会导致无意义的乱码。

陷阱 3：遍历时破坏字符

for (let i = 0; i < emoji.length; i++) {
  console.log(emoji[i]); // 依次输出两个无效代码单元
}

• 使用传统 for 循环会错误拆分代理对。

四、正确处理方法

方法 1：使用 for...of 循环

for (const char of emoji) {
  console.log(char); // "😀"（正确输出）
}

• for...of 基于迭代器协议，按码点遍历字符。

方法 2：使用 Array.from() 或扩展运算符

const chars = Array.from(emoji); // ["😀"]
const chars2 = [...emoji];        // ["😀"]

• 这两种方法都基于字符串的迭代器，将字符串按字符拆分为数组。

方法 3：使用 String.prototype.codePointAt() 与 String.fromCodePoint()

const codePoint = emoji.codePointAt(0); // 128512
const reconstructed = String.fromCodePoint(codePoint); // "😀"

• codePointAt() 返回完整码点（需传入代理对高位索引）。
• 注意：codePointAt(1) 会返回代理对低位的数值，不是完整码点。

方法 4：判断字符是否为代理对

function isSurrogatePair(char) {
  const code = char.charCodeAt(0);
  return code >= 0xD800 && code <= 0xDBFF;
}

五、处理字符串长度的正确方式

function countCharacters(str) {
  // 方案 1：使用扩展运算符
  return [...str].length;

  // 方案 2：使用 Unicode 感知的迭代
  let count = 0;
  for (const char of str) count++;
  return count;

  // 方案 3：使用正则匹配码点
  return Array.from(str.match(/./ug) || []).length;
}

六、实战注意事项

1. 反向遍历：使用扩展运算符转为数组后再反转，避免索引错位。
2. 截取子串：使用 String.prototype.slice() 可能拆分代理对。安全方法：

   function safeSubstring(str, start, end) {
     return [...str].slice(start, end).join('');
   }
   

3. 正则表达式标志 u：启用 Unicode 模式，使 . 匹配一个完整字符（包括辅助平面）。

   "😀😃".match(/./g);  // ["\ud83d", "\ude00", "\ud83d", "\ude03"]
   "😀😃".match(/./ug); // ["😀", "😃"]
   

七、兼容性考虑

• 扩展运算符、for...of、codePointAt() 等方法在 ES6+ 环境中完全支持。
• 对于老版本环境，可使用第三方库（如 punycode）或自行实现代理对检测逻辑。

八、总结

处理 Unicode 字符串时，必须明确区分“代码单元”与“字符”。始终使用基于码点的方法（迭代器、u 标志正则等）进行操作，可避免因代理对导致的常见陷阱。在开发国际化应用或处理用户输入时，这一点尤为重要。