本文详解为何 split("") 会导致印地语、日语等 Unicode 复合字符在 Safari 中显示异常，并提供基于 Intl.Segmenter 的现代解决方案及兼容性 fallback 方案。
本文详解为何 `split("")` 会导致印地语、日语等 unicode 复合字符在 safari 中显示异常，并提供基于 `intl.segmenter` 的现代解决方案及兼容性 fallback 方案。
在实现多语言轮播文本（如印地语「अभय चंद्रा」）时，若直接使用 str.split("") 拆分字符串，会导致 Safari（及其他 WebKit 浏览器）中文字断裂、乱码或渲染错位——这不是字体或编码问题，而是 JavaScript 字符串处理机制与 Unicode 图形符号（grapheme clusters）不匹配所致。
? 根本原因：split("") 按 UTF-16 code units 拆分，而非用户感知的“字”
印地语等印度系文字广泛依赖组合字符（combining characters），例如：
- चं 实际由基础字符 च（U+091A） + 修饰符 ं（U+0902，anusvāra）组成；
- द्रा 是 द्र（连字 ligature）+ ा（元音符号）的复合体。
"अभय चंद्रा".split("") 在 Safari 中会错误地将 चं 拆成两个独立 code unit，破坏其渲染逻辑，导致字形无法正确合成，视觉上表现为缺失、错位或方块符号。
✅ 正确方案：按图形单位（grapheme cluster）拆分
现代标准推荐使用 Intl.Segmenter API，它专为语言感知的文本分割设计：
const graphemeSplit = (str, locale) => {
try {
const segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
return Array.from(segmenter.segment(str), ({ segment }) => segment);
} catch (e) {
// 回退到保守策略（见下文）
console.warn('Intl.Segmenter not supported, using fallback');
return [...str]; // 仅适用于简单拉丁脚本
}
};在 DOM 初始化阶段调用该函数，并通过 data-locale 属性指定语言区域：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
<span class="word w-2" data-locale="hi-IN">अभय चंद्रा</span>
words.forEach((word) => {
const locale = word.dataset.locale || 'en';
const letters = graphemeSplit(word.textContent.trim(), locale);
word.textContent = '';
letters.forEach(letter => {
const span = document.createElement('span');
span.textContent = letter;
span.className = 'letter';
word.append(span);
});
});✅ 优势：自动适配 Hindi、Japanese、Korean、Russian 等所有复杂脚本；语义准确；无需手动维护字符映射表。
? 兼容性注意事项（Safari 16.4+ 支持，旧版需 fallback）
Intl.Segmenter 在 Safari 中自 16.4 版本（2023年3月）起支持，iOS Safari 16.4+ 同步可用。若需支持更早版本（如 Safari 15.x），建议采用预定义图形单位映射表作为降级方案：
const localeGraphemes = {
'hi-IN': ['अ', 'भ', 'य', ' ', 'चं', 'द्रा', ' '],
'ja-JP': ['ア', 'バ', 'イ', '・', 'チ', 'ャ', 'ン', 'ド', 'ラ'],
'ko-KR': ['아', '바', '이', ' ', '찬', '드', '라'],
'ru-RU': ['А', 'б', 'х', 'а', 'й', ' ', 'Ч', 'а', 'н', 'д', 'р', 'а'],
'en': ['A', 'b', 'h', 'a', 'y', '_', 'C', 'h', 'a', 'n', 'd', 'r', 'a']
};
// 使用示例
const locale = word.dataset.locale;
const letters = localeGraphemes[locale] || [...word.textContent];⚠️ 注意：此方式需人工校验每个词的图形单位划分（尤其注意连字、变音符号、空格位置），适合固定文案场景；动态内容仍应优先使用 Intl.Segmenter。
? 验证与调试建议
- 使用 console.log([...str]) 与 graphemeSplit(str, 'hi-IN') 对比输出，确认是否保留 चं、द्रा 等复合单元；
- 在 Safari 开发者工具中检查 .letter 元素的 textContent 是否完整（而非单个 Unicode 码点）；
- 确保 HTML 声明 <meta charset="UTF-8">，且服务器返回 Content-Type: text/html; charset=utf-8。
✅ 总结
| 方法 | 准确性 | 兼容性 | 维护成本 | 推荐场景 |
|---|---|---|---|---|
| str.split("") | ❌ 破坏复合字符 | ✅ 全浏览器 | 低 | 仅限纯 ASCII |
| Intl.Segmenter | ✅ 语言感知 | ⚠️ Safari 16.4+ | 低 | 现代项目首选 |
| 静态图形单位映射 | ✅ 手动可控 | ✅ 全浏览器 | 高（需校验） | 需兼容旧版 Safari |
正确处理 Unicode 图形单位是多语言 Web 应用的基础能力。摒弃 split("")，拥抱 Intl.Segmenter，即可让印地语、日语等文字在 Safari 中如预期般优雅呈现。
