js字符串转数组split中文乱码解决

一、问题复现：为什么常用汉字正常，特定中文却出现乱码？

在平时的前端开发中，很多人习惯通过空字符串 split('') 来将字符串转换为逐字数组。对于常规的一二级常用汉字，这种方式往往不会报错：

// 示例 1：常用汉字拆分（表面看似正常）
const normalText = "你好中国";
const normalArr = normalText.split('');
console.log(normalArr);
// 输出示例：['你', '好', '中', '国']
console.log(normalArr.length); // 4

但一旦业务数据中出现人名生僻字、地名特殊汉字（例如“𠮷野家”中的“𠮷”，字码 U+20BB7；或者“𪚥”，字码 U+2A6A5）时，split('') 会瞬间失效：

// 示例 2：包含生僻汉字时的 split 异常表现
const rareText = "𠮷野家";
const brokenArr = rareText.split('');

console.log(brokenArr);
// 示例运行输出：['\\uD842', '\\uDFB7', '野', '家']
// 当将数组元素渲染到 HTML 或控制台时，将显示为：
// ['�', '�', '野', '家']

console.log(brokenArr.length); 
// 实际只有 3 个文字，但数组长度却变成了 4！

在上述代码中，原本代表一个完整汉字的“𠮷”，被强行切成了两个毫无意义的孤立项。当浏览器或终端尝试解析单独的 \uD842 时，由于找不到合法的字形映射，只能退化为代表非法字符的“�”。

二、深层根因：UTF-16 代码单元与 Unicode 码位的脱离

要彻底解决这个乱码问题，必须理解 JavaScript 内部的字符串表示机制。JavaScript 的字符串引擎诞生于上世纪 90 年代，采用了 UTF-16 编码规范：

• 代码单元（Code Unit）：JavaScript 中字符串存储的最小物理单元为 16 位（2 字节）。基本的常用字（码位范围在 U+0000 至 U+FFFF 的“基本多语言平面” BMP）刚好占用 1 个代码单元。
• 代理对（Surrogate Pair）：随着汉字字符集扩充（如 CJK 扩展区汉字），码位超过了 0xFFFF。为了兼容 16 位体系，Unicode 规定使用两个连续的 16 位单元组合成一个“代理对”——一个高位代理（0xD800–0xDBFF）和一个低位代理（0xDC00–0xDFFF）共同代表一个字。

String.prototype.split('') 的设计早于 ES6，它的底层逻辑是机械地按 16 位代码单元逐个切割。它并不知道两个单元其实绑定属于同一个汉字，就像把一把刀直接切在代理对中间，将其硬生生拆成两截。

三、两种处理方式的关键差异对比

为了更清楚地看清机制差异对实际程序逻辑的影响，我们在一致的环境条件下对两种拆分模式进行横向对比：

// 一致对比环境：Node.js 18+ 或现代浏览器控制台
const input = "汉字𠮷𪚥"; // 包含2个常用汉字与2个扩展示范汉字

四、排查与替换解决四步法

如果在现有项目或线上日志中发现了中文截断或乱码问题，可以按照以下规范步骤排查并彻底解决：

步骤一：现象定位与代理对检测

在接收到用户反馈或处理文本异常时，首先确认是否由于字符截断引起。可以通过检查字符串的 codePointAt() 与 charCodeAt() 是否一致来判断：

// 检查字符串中是否存在辅助平面字符（代理对）
function hasSurrogatePairs(str) {
  for (let i = 0; i < str.length; i++) {
    const code = str.charCodeAt(i);
    // 高位代理范围：0xD800 到 0xDBFF
    if (code >= 0xD800 && code <= 0xDBFF) {
      return true;
    }
  }
  return false;
}

console.log(hasSurrogatePairs("张三"));  // false (纯普通汉字)
console.log(hasSurrogatePairs("张𠮷"));  // true (存在代理对，禁止使用 split(''))

步骤二：使用标准码位语法重构（核心推荐）

在 ES6（ECMAScript 2015）及以上版本中，JavaScript 引入了对 Unicode 码位的原生迭代协议。以下两种写法均可在拆分时自动组合高低代理对，是替代 split('') 的最标准解法：

// 方案 2.1：使用 Array.from()
const text = "𠮷野家";
const arr1 = Array.from(text);
console.log(arr1); // 输出示例：['𠮷', '野', '家']

// 方案 2.2：使用 ES6 扩展运算符（Spread Operator）
const arr2 = [...text];
console.log(arr2); // 输出示例：['𠮷', '野', '家']

步骤三：针对复合字形使用 Intl.Segmenter（高级排版）

在某些特殊中文场景（如汉语拼音带有独立组合声调符、或者汉字与复合标号混合）中，即使是 Unicode 码位也可能会将“基础字母”与“附加声调”拆开。如果需要保证按人类视觉感知的“字形簇”（Grapheme Cluster）进行切分，应选用现代浏览器内置的 Intl.Segmenter：

// 方案 2.3：按人类感知的字形簇分割
const pinyinWithTone = "nǐ hǎo 𠮷"; // 包含变音符组合字符与生僻汉字

const segmenter = new Intl.Segmenter('zh-CN', { granularity: 'grapheme' });
const segments = Array.from(segmenter.segment(pinyinWithTone), s => s.segment);

console.log(segments);
// 输出示例：每个带有声调的字母和生僻字均作为独立完整字形保留

步骤四：边界测试与自动化验证

在完成代码替换后，建议在工程单元测试（如 Jest / Vitest）中添加包含生僻汉字与特殊符号的用例，确保后续维护人员不会误改回 split('')：

// 编写针对中文拆分的边界测试用例
function safeStringToArray(str) {
  if (typeof str !== 'string') return [];
  return [...str];
}

// 验证用例
console.assert(safeStringToArray("𠮷野家").length === 3, "生僻字长度验证失败");
console.assert(safeStringToArray("𠮷野家")[0] === "𠮷", "首字符提取失败");
console.assert(!safeStringToArray("𪚥").includes('\\uD869'), "存在未解析代理项");
console.log("全部边界测试通过！");

五、生产环境注意事项与常见混淆场景

六、总结与选型决策导图

解决 JavaScript 中字符串转数组中文乱码的关键，在于彻底摒弃基于 16 位代码单元的 split('')。现代 JavaScript 提供了完备的码位与字形级工具链：

1. 日常项目首选：遇到需要将中文逐字拆分成数组的场景，统一使用 [...str] 或 Array.from(str)，兼顾语法简练与生僻字安全。
2. 国际化与复合排版：如果业务涉及音标组合、古籍注音或复杂的符号拼接，优先引入 Intl.Segmenter。
3. 工程规范：可以在 ESLint 中配置自定义规则，警惕或禁止对可能包含中文的动态变量使用无参数或空串参数的 split('') 调用。