Emoji 表情与辅助平面字符在 JavaScript length 计算及截断乱码坑

一、问题概述：'🚀'.length === 2 的直觉陷阱与截断乱码事故

在前端表单限制输入字数（如评论框限制 100 字）或服务端截取摘要时，直接使用 str.length 与 str.substring(0, N) 是最常见的 Bug 来源。在 JavaScript 中，字符 'A' 的 length 是 1，但 Emoji 表情 '🚀' 的 length 是 2，更复杂的组合 Emoji（如家庭 '👨‍👩‍👧‍👦'）的 length 甚至高达 11！如果粗暴切片，会将代理对或零宽连字符 (ZWJ) 斩断，导致末尾产生孤立的高低代理项乱码（显示为 ）。

二、最小复现：字符串长度计算与暴力截断的崩溃效果

下面的代码示范了 Emoji 在 JavaScript 中的真实 length 表现以及暴力截断产生的破坏：

/* 1. Emoji 长度差异 */
console.log("🚀".length); // 输出: 2 (包含高代理项 \uD83D 与低代理项 \uDE80)
console.log("👨‍👩‍👧‍👦".length); // 输出: 11 (包含 4 个 Emoji 码点 + 3 个 ZWJ 零宽连字符 \u200D)

/* 2. 暴力截断引发孤立代理项乱码 */
const text = "Hello 🚀 World";
const truncated = text.substring(0, 7); // 切片切在了 '🚀' 的中间！
console.log(truncated); // 输出: "Hello \uD83D" -> 末尾产生孤立高代理项乱码 ！

三、根因分析：代码单元 (Code Unit)、码点 (Code Point) 与字形集合 (Grapheme Cluster)

1. Code Unit (代码单元)：JavaScript 内部使用 UTF-16 编码存储字符串。每个 Code Unit 占 16 比特位。.length 返回的就是 UTF-16 代码单元的数量，而非人类直觉上的“字符数”。2. Code Point (码点)：Unicode 字符集中给每个符号分配的唯一数字编号（U+0000 到 U+10FFFF）。超出基础多语言平面 (U+FFFF) 的辅助平面字符（如 Emoji 🚀 U+1F680）必须由一对 UTF-16 代码单元（Surrogate Pair 代理对）表示。3. Grapheme Cluster (字形集合)：人类视觉感官上识别的“一个独立字符”。例如 '👨‍👩‍👧‍👦' 是由男人、ZWJ、女人、ZWJ、女孩、ZWJ、男孩 7 个 Unicode 码点组合而成的单字形。4. `Array.from` 的局限性：使用 Array.from(str) 或扩展运算符 [...str] 可以按 Code Point 正确拆分单个 Emoji 代理对，但面对多码点组合的 ZWJ Emoji 时仍然会将一个表情拆成多份！

四、推荐方案：使用 Intl.Segmenter 实现人类感知粒度的安全截断

1. 现代标准方案：使用 ES2022 原生 Intl.Segmenter API（指定 granularity: 'grapheme'），它可以准确识别复杂的 Unicode Grapheme Cluster 视觉字形。2. 降级兼容方案：如果不支持 Intl.Segmenter，可退而求其次使用 Array.from() 处理单码点 Emoji，并防止断在高代理项 (0xD800 sim 0xDBFF) 末尾。

五、完整代码：基于 Intl.Segmenter 的 Unicode 安全截断纯函数

下面的 TypeScript 代码示范如何构建安全计算视觉字形数并进行零乱码截断的 pure function。

function safeUnicodeTruncate(str: string, maxGraphemes: number): string {
  // 1. 优先使用 ES2022 原生 Intl.Segmenter API (准确处理 ZWJ 与修饰符)
  if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") {
    const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
    const segments = Array.from(segmenter.segment(str));

    if (segments.length <= maxGraphemes) {
      return str;
    }

    return segments
      .slice(0, maxGraphemes)
      .map((s) => s.segment)
      .join("");
  }

  // 2. 降级方案：使用 Array.from (可处理普通 Emoji 代理对)
  const codePoints = Array.from(str);
  if (codePoints.length <= maxGraphemes) {
    return str;
  }

  return codePoints.slice(0, maxGraphemes).join("");
}

const longTitle = "最新消息 🚀 👨‍👩‍👧‍👦 独家报道";
console.log("安全截断 6 个视觉字形:", safeUnicodeTruncate(longTitle, 6)); // 输出: "最新消息 🚀 👨‍👩‍👧‍👦"

六、常见错误方案

使用 str.substring(0, N) 或 str.slice(0, N) 截取包含 Emoji 的文本；假设所有 Emoji 长度都等于 2（忽略了 ZWJ 组合表情与皮肤颜色的变体修饰符）；误以为正则表达式 . 能匹配所有 Unicode 字符（在未开启 u 标志时 . 无法匹配代理对）。

七、边界条件：正则表达式 u / v 标志与后端数据库存储

在正则匹配中必须启用 /pattern/u（或 ES2024 v 标志）才能把代理对视作单个字符；在 MySQL 数据库中物理存储 Emoji 必须使用 utf8mb4 字符集，传统的 utf8 (utf8mb3) 最多仅支持 3 字节，插入 4 字节 Emoji 会抛出数据截断错误。

八、如何验证 Emoji 截断安全性与渲染准确性

校验截断后的字符串中是否存在单独的孤立代理项 /[���-���](?![���-���])/；测试家庭表情 👨‍👩‍👧‍👦 与肤色表情 👍🏽 截断后是否保持完整结构不乱码。

九、FAQ

问：为什么 Array.from('👨‍👩‍👧‍👦').length 输出 7？答：因为该家庭 Emoji 是由 4 个基本人物码点和 3 个 ZWJ 零宽连字符（‍）组合连接而成的，Array.from 按 Code Point 拆分会得到 7 个独立码点。

问：Intl.Segmenter 的浏览器兼容性如何？答：Chrome 87+、Safari 14.1+、Firefox 125+ 及 Node.js 16+ 均已完全支持 Intl.Segmenter。

问：字符串传输到后端会被截断吗？答：如果 API 协议限制了字节数（如 UTF-8 字节限制），需要在发送前计算物理字节长度 new TextEncoder().encode(str).length。

十、总结

理解代码单元、码点与字形集合的区别是处理 Unicode 的关键。开发中应避免使用 substring 物理截断字符串，全面拥抱 Intl.Segmenter 或 Array.from 保障 Emoji 与复杂字形零乱码。