intl.collator 是 javascript 中专为多语言排序设计的国际化 api,能正确处理中文拼音顺序、多音字、声调等细节,配合 sort 可实现符合中文用户直觉的排序,支持中英文数字混合内容的自然排序。

Intl.Collator 是 JavaScript 中专为多语言排序设计的国际化 API,它能正确处理中文字符的拼音顺序、多音字、声调敏感性等语义细节,比简单用 localeCompare 或手动转拼音更可靠。配合 Array.prototype.sort,可实现真正符合中文用户直觉的排序效果。
设置中文 locale 并启用拼音排序
中文排序默认按 Unicode 码点(即字形编码)排,结果不符合拼音习惯。需显式指定 locale 为 'zh' 或 'zh-CN',并开启 numeric: true(避免数字被当字符串错位),必要时加 sensitivity: 'base' 忽略声调差异:
-
new Intl.Collator('zh-CN', { numeric: true, sensitivity: 'base' })—— 最常用配置,兼容“张三”“张珊”“张山”等同音不同调场景 - 若需区分声调(如“妈 m┓麻 mᔓ马 mǎ”),去掉
sensitivity: 'base',用默认'variant' - 避免用
'zh'而非'zh-CN',部分旧环境对泛 locale 支持不一致
直接传入 sort 方法,无需手动提取拼音
Collator 实例的 compare 方法可直接作为 sort 的比较函数,无需预先调用 pinyin 库或正则转换。它在底层调用系统/引擎的 ICU 排序规则,准确率高且性能好:
const names = ['王五', '李四', '张三', '陈二', '赵一'];
const collator = new Intl.Collator('zh-CN', { numeric: true });
names.sort(collator.compare); // ✅ 正确按拼音首字母 A-Z 排:赵一、陈二、李四、张三、王五
注意:collator.compare 是已绑定上下文的方法,可安全直接传递,不用写 (a, b) => collator.compare(a, b)。
处理混合内容(中英文、数字、符号)
真实数据常含“iPhone15”“测试版v2.1”“北京-朝阳区”等混合字符串。Intl.Collator 默认按“字母→数字→符号”层级排序,且中英文混排时会将中文字符按拼音、英文字母按字典序自然融合:
- 启用
numeric: true后,“item2”会排在“item10”之前(数值序),而非字符串序的 “item10” - “苹果”会在“Apple”之前(因拼音首字母 A 对应英文 A,ICU 按统一权重比较)
- 若需强制中文优先、英文次之,可先分组再合并;但多数业务场景下默认行为已足够自然
兼容性与降级建议
Intl.Collator 在现代浏览器及 Node.js 14+ 中完全支持。若需兼容 IE 或极老环境:
- 检查支持性:
typeof Intl?.Collator === 'function' - 降级方案:用轻量拼音库(如
pinyin-pro)预生成拼音字段,再按拼音字符串排序(牺牲实时性和内存) - 不推荐用
String.prototype.localeCompare替代 —— 它虽也支持 locale,但在数组排序中反复创建比较逻辑,性能差且不易统一配置
不复杂但容易忽略:排序是纯前端行为,服务端返回的数据无需预处理;只要确保 Collator 配置合理,中文用户看到的就是他们预期的“字典序”。










