js字符串转数组用codePointAt处理四字节字符

缩略图概览：JavaScript 中普通字符与四字节字符在代理对结构下的解析与数组重组流程

一、四字节字符导致 split('') 切分失效的底层原因

JavaScript 引擎内部对字符串的存储和索引基于 UTF-16 编码。在 UTF-16 规范中，最小的编解码单位是 16 位的“代码单元”（Code Unit，即 2 个字节）。

Unicode 编码空间分为 17 个平面（每个平面容纳 65,536 个码点）。其中第 0 平面被称为基本多语言平面（BMP，Basic Multilingual Plane），码点范围为 U+0000 ~ U+FFFF，涵盖了 ASCII 字符、常用中文标点及绝大多数通用汉字。这些字符的码点在 16 位二进制以内，因此只需要 1 个 UTF-16 代码单元（2 个字节）就能完整存储。

然而，随着生僻汉字（如中日韩统一表意文字扩充字集中的“𠮷” U+20BB7）和 Emoji 表情（如“🚀” U+1F680）的大量普及，这些字符位于辅助平面（Supplementary Planes，码点范围 U+10000 ~ U+10FFFF），其码点超过了 16 位的最大容量，必须占用 4 个字节。

为了在 UTF-16 体系下表示四字节字符，Unicode 规定了代理对（Surrogate Pair）机制：使用两个保留的 16 位代码单元组合表达一个 32 位码点。前半部分称为高位代理（High Surrogate），取值范围在 0xD800 ~ 0xDBFF；后半部分称为低位代理（Low Surrogate），取值范围在 0xDC00 ~ 0xDFFF。

图 1：基本多语言平面 (BMP) 与辅助平面四字节字符在 UTF-16 下的内存映射对比

传统的 str.split('') 以及早期 API（如 charAt()、charCodeAt()）完全是基于 16 位代码单元进行索引的。当遇到由代理对构成的四字节字符时，split('') 会将高位代理与低位代理拆散成两个独立的元素。这两个半字在 Unicode 中属于非打印的保留区段，在界面渲染时会表现为问号菱形框或乱码，并且导致数组的 length 凭空翻倍。

// 传统 split('') 拆分四字节字符的缺陷演示
const str = "A𠮷B";
console.log("字符串长度:", str.length); // 4（因为 '𠮷' 占用了 2 个代码单元）

const brokenArr = str.split("");
console.log("拆分后的数组:", brokenArr); 
// 输出: ["A", "\uD842", "\uDFB7", "B"]，四字节字符 '𠮷' 被劈裂成了 2 个孤立半字！
console.log("数组元素个数:", brokenArr.length); // 4，不符合人类视觉认知中的 3 个字符

二、codePointAt 的工作原理与码点判定机制

为了解决 ECMAScript 5 中无法正确读取 32 位 Unicode 字符的缺陷，ES6（ECMAScript 2015）在字符串原型上新增了 codePointAt() 方法。

str.codePointAt(pos) 的核心特性在于它具备自动组装代理对的能力：

• 如果 pos 处的代码单元不是代理对的起始位置（即属于常规 BMP 字符），它返回该字符对应的 16 位整数值（取值 0 ~ 0xFFFF）。
• 如果 pos 处的代码单元恰好是一个高位代理（四字节字符的起始半字），codePointAt(pos) 会自动向后读取相邻的低位代理，并将两者结合计算出完整的 32 位 Unicode 码点整数（取值 > 0xFFFF，即大于 65535）。

这意味着，我们只需要检测 str.codePointAt(i) > 0xFFFF，就可以得出两个明确结论：

1. 当前起始于索引 i 的是一个四字节补充平面字符。
2. 该字符在原始字符串中跨越了 2 个 UTF-16 代码单元，下一次循环时指针索引必须递增 2，截取内容时应使用 str.slice(i, i + 2)。

三、使用 codePointAt 实现字符串转数组的算法流程

基于上述原理，我们不能使用常规固定步长为 1 的 for (let i = 0; i < str.length; i++) 循环，而应使用能够根据码点宽度动态递增指针的循环结构。

图 2：使用 codePointAt 判断四字节字符并动态推进指针的转换流程图

下面是封装好的完整函数实现，代码中严格按照指针步长进行边界判断与切片截取：

/**
 * 使用 codePointAt 将字符串准确转为字符数组（兼容处理四字节字符）
 * @param {string} str 输入字符串
 * @returns {string[]} 正确切分后的字符数组
 */
function stringToArrayByCodePoint(str) {
  if (typeof str !== "string") {
    return [];
  }

  const result = [];
  const len = str.length;
  let i = 0;

  while (i < len) {
    // 获取当前索引处的完整 Unicode 码点
    const codePoint = str.codePointAt(i);

    // 辅助平面四字节字符的码点必然大于 0xFFFF (65535)
    if (codePoint > 0xffff) {
      // 占用 2 个代码单元，截取 2 个字符宽度
      result.push(str.slice(i, i + 2));
      // 指针跳过对应的低位代理
      i += 2;
    } else {
      // 占用 1 个代码单元（常规 2 字节 BMP 字符或 ASCII 字符）
      result.push(str.slice(i, i + 1));
      // 指针常规前移 1 位
      i += 1;
    }
  }

  return result;
}

四、执行验证与运行结果展示

为了验证算法的正确性，我们在 Node.js 或现代浏览器控制台中运行包含纯英文、常用汉字、四字节生僻汉字与四字节 Emoji 的测试用例：

// 综合场景测试
const testCases = [
  "Hello 世界",
  "A𠮷B🚀C🎉",
  "👨‍💻与𠀾",
];

testCases.forEach((text, index) => {
  const arr = stringToArrayByCodePoint(text);
  console.log(`--- 测试用例 ${index + 1} ---`);
  console.log("原始字符串:", text);
  console.log("字符串 length:", text.length);
  console.log("转换后数组:", arr);
  console.log("数组实际长度:", arr.length);
});

运行结果输出如下（明确标为示例输出）：

// 示例输出结果
--- 测试用例 1 ---
原始字符串: Hello 世界
字符串 length: 8
转换后数组: ["H", "e", "l", "l", "o", " ", "世", "界"]
数组实际长度: 8

--- 测试用例 2 ---
原始字符串: A𠮷B🚀C🎉
字符串 length: 9
转换后数组: ["A", "𠮷", "B", "🚀", "C", "🎉"]
数组实际长度: 6

--- 测试用例 3 ---
原始字符串: 👨‍💻与𠀾
字符串 length: 7
转换后数组: ["👨", "\u200d", "💻", "与", "𠀾"]
数组实际长度: 5

在测试用例 2 中，原始字符串 "A𠮷B🚀C🎉" 的 length 为 9（因为包含了 3 个普通字符和 3 个各占 2 个代码单元的四字节字符）。经过 stringToArrayByCodePoint 处理后，成功得到 6 个元素的数组，且生僻字“𠮷”与两个表情符号均完整保留，没有任何代理截断。

五、与其他转数组方案的横向机制对比

在日常开发中，将字符串转数组不仅有 codePointAt 手动循环，ES6 还提供了 Array.from() 和扩展运算符 [...str]。了解它们在底层的机制差异有助于准确进行技术选型。

图 3：split('')、ES6 迭代语法糖与 codePointAt 手动控制的底层差异对比

六、边界场景与工程实践注意事项

在实际项目落地时，处理四字节字符还需要注意以下两项关键边界：

1. 孤立代理项（Unpaired Surrogates）的安全防御

如果在畸形字符串或网络数据传输截断中出现了单独的低位代理（例如 "\uDFB7"），直接调用 str.codePointAt(i) 时，由于它缺少前半部高位代理，codePointAt() 仅仅会返回该低位代理自身的 16 位值（0xDFB7，小于 0xFFFF）。

按照上述算法，它会被作为单字符处理并步进 1，程序不会死循环或抛出异常。但如果在严格的数据清洗业务中，可以通过判断码点是否落在 0xD800 ~ 0xDFFF 区间内，主动排查并过滤非法截断的垃圾半字。

2. 复合 Emoji 与字形簇（Grapheme Clusters）的区别

必须注意：一个四字节 Unicode 字符并不等同于人类视觉上的一个“独立表情”。例如测试用例 3 中的程序员表情“👨‍💻”：

• 它在底层的编码构成是：👨 (U+1F468, 4字节) + 零宽连字 (ZWJ, U+200D, 2字节) + 💻 (U+1F4BB, 4字节)。
• 无论是 codePointAt 还是 Array.from()，它们都是在 Unicode 码点（Code Point） 级别进行拆分的，因此会拆分成 3 个独立单元。
• 如果业务需求要求将此类“合体 Emoji”或带肤色修饰符的表情视为单一元素，应当使用现代 ECMAScript 国际化标准 API Intl.Segmenter（设置 granularity: 'grapheme'）。

图 4：JavaScript 字符串拆分技术选型决策树与核心备忘

七、总结

js字符串转数组用codePointAt处理四字节字符的核心本质，在于突破 JavaScript 历史遗留的 16 位 UTF-16 代码单元限制，回归真实的 Unicode 码点抽象。

通过判断 codePointAt(i) > 0xFFFF，开发者能够准确识别出占用 4 个字节的辅助平面字符，配合 i += 2 的动态步进截取，彻底根除 split('') 劈裂代理对导致的乱码隐患。在编写词法解析、字符截断保护、富文本光标运算或高性能字符处理类库时，这种基于 codePointAt 的底层控制方式是最稳健可靠的技术基石。