js字符串转数组Intl.Segmenter按字形分割

一、传统分割方案的局限：为什么 split('') 和 [...str] 会拆碎字符？

在很多初级教程中，最常见的字符串转数组写法是 str.split('')。但只要待处理文本中出现了 Emoji 表情符号、生僻字或外语音标，该方法就会立即失效。产生这一现象的根源在于 JavaScript 语言内部的字符编码历史包袱：

• UTF-16 代码单元（Code Unit）： JavaScript 内部字符串以 UTF-16 编码存储，每个索引位置对应一个 16 位（2 字节）的代码单元。对于位于基本多语言平面（BMP，码点在 U+0000 至 U+FFFF 之间）的英文字母、常用汉字，一个代码单元恰好对应一个字符。
• 代理对（Surrogate Pairs）： 当遇到超出 U+FFFF 的辅助平面字符（例如大部分常用 Emoji 表情、生僻古汉字）时，UTF-16 必须使用两个 16 位的代码单元组合表示，即高位代理与低位代理。
• 字形簇（Grapheme Cluster）： 在 Unicode 规范中，用户肉眼认知的“单个字符”可能由多个独立的码点串联而成（例如带肤色的点赞手势、家庭组合表情、字母带变音符）。

str.split('') 的本质是盲目按照“16 位代码单元”切分。以常见表情 "😄" 为例：它的 Unicode 码点是 U+1F604，UTF-16 编码由 \uD83D 和 \uDE04 两个代理对构成。执行 "😄".split('') 会得到 ["\uD83D", "\uDE04"]，数组长度为 2，并且单独输出每个元素都会得到无法显示的乱码或问号符号。

二、认知辨析：为什么 [...str] 依旧不能解决所有问题？

很多开发者发现 split('') 的代理对缺陷后，会转而推荐 ES6 引入的扩展运算符 [...str] 或 Array.from(str)。这种说法在很长一段时间内非常流行，因为它们在处理单一码点的 Emoji 时确实能够正常工作。

扩展运算符基于字符串的 Symbol.iterator 协议运作，它能够自动将成对的高低代理对合成为一个完整的“Unicode 码点（Code Point）”。例如：

// 对于单一码点表情，扩展运算符有效：
[..."😄"]; 
// 输出: ["😄"]，长度为 1

但“一个码点”并不等于“一个视觉字符”。现代 Unicode 支持通过控制符将多个独立码点融合成一个单一的视觉图元。最典型的便是 ZWJ（Zero Width Joiner，零宽连字符 U+200D） 序列与 组合字符序列（Combining Character Sequences）：

• 复合家庭表情： "👨‍👩‍👧‍👦" 实际上由 4 个独立人物码点和 3 个 ZWJ 连字符拼装而成。使用 [..."👨‍👩‍👧‍👦"] 分割后，会得到包含 7 个元素的数组：["👨", "\u200D", "👩", "\u200D", "👧", "\u200D", "👦"]。连字效果在数组内部彻底断裂。
• 国旗符号： 中国国旗 "🇨🇳" 由两个区域指示符码点 U+1F1E8 (Regional Indicator Symbol Letter C) 和 U+1F1F3 (Letter N) 拼合。使用 [..."🇨🇳"] 会被无情拆分为 ["🇨", "🇳"]，国旗图像立即碎裂成两个英文字母图标。
• 音标组合： 字母 "é" 若以规范分解形式存在（即基底字符 'e' 紧随组合尖音符号 \u0301），[...str] 会将其拆为字母与悬空音标两个独立元素。

因此，扩展运算符仅仅解决了“底层 UTF-16 代理对合并”问题，并没有解决“上层人类视觉字形识别”问题。对于不可预知的用户输入，它依然潜藏着字形破碎的风险。

三、使用 Intl.Segmenter 按字形分割的标准操作步骤

ECMAScript 2022 正式纳入了原生的国际化文本分割接口 Intl.Segmenter。它严格按照 Unicode 文本分割算法（UAX #29 规范）实现，能够精准判定字形簇（Grapheme Cluster）边界。

将字符串转换为按字形分割的纯数组，可以通过以下四个步骤完成：

步骤 1：创建配置了 grapheme 粒度的分割器实例

调用构造函数 new Intl.Segmenter(locale, options)。其中第一个参数为区域语言标识符（对于通用字形切分，可传 'zh'、'en' 或 undefined 遵循宿主环境默认）；第二个选项对象中，必须明确设置 granularity: 'grapheme'。如果不设此选项，默认行为是按照单词（'word'）或句子（'sentence'）切分。

步骤 2：传入文本调用 segment() 方法

执行 segmenter.segment(text)。该方法不会一次性把整个字符串解析为庞大的对象数组，而是返回一个轻量级、具备惰性求值能力的 Segments 可迭代对象，保证在处理大文本段落时的高性能。

步骤 3：利用 Array.from 映射提取 segment 属性

对 Segments 迭代时，产生的每个数据项都是一个包含元信息的对象：

• segment：匹配到的单个完整字形字符串（这是我们需要的目标值）；
• index：该字形在原始字符串中的起始 UTF-16 字符下标；
• input：原始输入文本的完整引用。

借助 Array.from(segments, item => item.segment)，可以在迭代的同时一步完成解构与数组构建，无需先生成中间对象数组再二次 map。

步骤 4：封装通用工具函数与验证示例

在实际项目中，我们可以将该逻辑封装为一个通用的工具函数：

/**
 * 将任意 JavaScript 字符串安全切分为视觉单字形数组
 * @param {string} text - 待分割的目标文本
 * @param {string} [locale='zh'] - 区域语言代码，默认推荐 'zh' 或 undefined
 * @returns {string[]} 符合肉眼感知的单字形数组
 */
function stringToGraphemes(text, locale = 'zh') {
  if (typeof text !== 'string') {
    return [];
  }
  const segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
  return Array.from(segmenter.segment(text), item => item.segment);
}

// === 结果验证示例 ===
const sample = "👨‍👩‍👧‍👦 🇨🇳 é";

// 传统 split('') 切分结果
console.log(sample.split('').length);
// 示例输出: 16 (代理对与控制符被完全碾碎)

// 扩展运算符 [...sample] 切分结果
console.log([...sample].length);
// 示例输出: 12 (ZWJ 连字与国旗被拆散)

// Intl.Segmenter 切分结果
const graphemes = stringToGraphemes(sample);
console.log(graphemes);
// 示例输出: ["👨‍👩‍👧‍👦", " ", "🇨🇳", " ", "é"]
console.log(graphemes.length);
// 示例输出: 5 (完全契合肉眼所见的 5 个字符)

四、底层机制解析：复合字形簇是如何被精确识别的？

为了理解 Intl.Segmenter 为何能做到百分之百准确，需要深入 Unicode 标准中的 UAX #29（Unicode Text Segmentation） 状态机原理。

根据 UAX #29 规范，字形边界判定的核心原则是：绝不在强依附关系的符号之间插入断点。

1. ZWJ 粘连规则（GB11）： 规则明确规定：当遇到 \p{Extended_Pictographic}（扩展象形符号）后紧跟 ZWJ (U+200D)，若下一个字符仍为扩展象形符号，两者的边界权重为“绝对不换行（Do not break）”。因此，即便 👨‍👩‍👧‍👦 串联了 7 个码点，状态机也会自始至终将其保持在同一个字形簇内。
2. 组合标记规则（GB9）： 无论基底字符是什么，后续紧随的 Extend（如变音符号）或 SpacingMark 都必须粘连在基底字符上，直到遇到下一个独立的基底字符或标点。
3. 区域标志规则（GB12/GB13）： 两个相邻的 Regional_Indicator 码点会自动成对合并为一个国家或地区旗帜字形簇，而不会继续与第三个指示符合并。

Intl.Segmenter 的底层直接复用了操作系统或 V8 引擎内部自带的 ICU（International Components for Unicode）库，无需在业务 JS 包中打包庞大的 Unicode 码表，兼具轻量与规范准确性。

五、工程实践与性能优化注意事项

在实际生产环境中，建议采用单例模式或闭包缓存来复用分割器实例：

// 单例复用模式
class GraphemeService {
  static #segmenter = new Intl.Segmenter('zh', { granularity: 'grapheme' });

  static split(str) {
    if (!str) return [];
    return Array.from(this.#segmenter.segment(str), item => item.segment);
  }

  /**
   * 安全截断文本到指定最大视觉字数，避免把 Emoji 截断一半
   */
  static truncate(str, maxVisualChars) {
    const chars = this.split(str);
    if (chars.length <= maxVisualChars) return str;
    return chars.slice(0, maxVisualChars).join('');
  }
}

六、方案选型与环境兼容性总结

不同分割方案在实际应用中有不同的权衡取舍。下表总结了各方案的核心差异：

当前，Intl.Segmenter 已经获得主流运行环境的全面原生支持（Chrome 87+、Node.js 16.0+、Safari 14.1+、Firefox 125+）。对于现代前端与服务端项目，它无疑是按字形将字符串分割为数组的最佳标准方案。