处理Emoji高位字符的codePointAt技巧

JavaScript 中处理 Emoji 等复杂 Unicode 字符时，`String.prototype.codePointAt()` 是关键利器——它能精准识别并返回完整的 Unicode 码点（如 🌍 的 U+1F30D），自动合并代理对，彻底规避 `charCodeAt()` 在高位字符上返回无意义代理值的陷阱；配合 `Array.from()` 或 `/./gu` 正则遍历，可真正按“人类可感知的字符”而非底层 UTF-16 编码单元来索引、计数和操作字符串，让 Emoji 定位、遍历与解析既安全又直观。

String.prototype.codePointAt 能准确获取 Unicode 码点（包括 Emoji 这类需要两个 UTF-16 单元的高位字符），避免 charCodeAt 在代理对（surrogate pair）上返回错误值。关键在于：它按码点（code point）而非 UTF-16 编码单元（code unit）计数，所以索引需对应到码点位置，而非字符串的 .length 下标。

理解 Emoji 的“双单元”本质

多数 Emoji（如 ?、?‍?、?）属于 Unicode 中的增补平面（U+10000 及以上），JavaScript 字符串内部用 UTF-16 编码，因此它们被表示为一对 16 位值（即“代理对”：high surrogate + low surrogate）。.length 返回的是 UTF-16 编码单元个数，不是真实字符数：

• '?'.length → 2（但它是 1 个字符）
• '?‍?'.length → 7（含多个代理对和 ZWJ 连接符）
• 'a'.length → 1（基本平面字符，单单元）

用 codePointAt 安全读取指定位置的完整码点

codePointAt(i) 检查索引 i 处是否为代理对的高位单元；若是，自动合并 i 和 i+1 两个位置，返回完整码点。否则直接返回该位置的码点值：

• 对 '?'（U+1F30D），'?'.codePointAt(0) → 127757（即 0x1F30D），正确；而 '?'.charCodeAt(0) → 55357（仅高位代理，无意义）
• 对 'ab'，'ab'.codePointAt(1) → 98（'b' 的码点），与 charCodeAt 一致
• 若 i 超出码点边界（如指向代理对的低位单元），codePointAt(i) 返回该单元值（不自动回退），所以应确保 i 是合法码点起始位置

遍历字符串时按码点而非下标推进

不能简单 for (let i = 0; i

• 最简方式：for (const ch of str) { console.log(ch.codePointAt(0).toString(16)); }
• 手动遍历（兼容旧环境）：
  let i = 0;
  while (i   const cp = str.codePointAt(i);
    console.log(cp.toString(16));
    i += cp > 0xFFFF ? 2 : 1;
  }
  （因为码点 > 0xFFFF 说明是增补字符，占 2 个 UTF-16 单元）

获取某个 Emoji 在字符串中的“第几个字符”位置

若想定位 emoji 是第几个视觉字符（而非第几个 UTF-16 单元），需先将字符串按码点切分：

• 用 Array.from(str) 将字符串转为码点数组（自动处理代理对），再用 indexOf 找位置：
  const chars = Array.from('Hi?!'); // ['H','i','?','!']
  const pos = chars.indexOf('?'); // → 2
• 或用正则匹配所有 Unicode 码点（ES2018+）：
  [...str.matchAll(/./gu)].map(m => m[0])，结果同 Array.from
• 得到 pos 后，可用 str.codePointAt(pos) 安全读取该字符码点

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《处理Emoji高位字符的codePointAt技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。