如何利用 Intl.Collator 实现支持拼音、部首等语义的中文数据精准排序
仅设置 locale: 'zh-CN' 无法满足中文排序需求
直接使用 new Intl.Collator('zh-CN') 对中文列表进行排序，结果常常出人意料：「王」可能排在「李」之前，「西瓜」也可能出现在「苹果」后面。这是因为默认的 zh-CN 配置仅采用基础的 Unicode 排序算法（UCA），并未激活中文特有的拼音、笔画或部首排序规则。不同浏览器（如 Chrome 与 Safari）的实际表现取决于其底层 ICU 数据版本，可能导致不一致的结果，同时也完全忽略了《GB/T 13418-92》或《GB18030》等国家标准中定义的部首与笔画顺序规范。
启用拼音排序的关键：正确配置 collation、sensitivity 与 numeric
当需要对中文姓名、产品名称等按读音排序时，仅指定 locale 是远远不够的，核心在于设置 collation: 'pinyin' —— 这是 ICU 库提供的扩展排序类型。虽然并非所有浏览器都支持，但 Chrome 90+、Edge 90+ 和 Safari 17+ 等现代浏览器已提供稳定支持。同时，必须配合以下参数以确保排序准确：
sensitivity: 'base'：忽略字母大小写和音调差异（例如将「zhang」、「Zhāng」、「ZHANG」视为相同）numeric: true：确保数字按数值大小排序，例如「第2章」会排在「第11章」之前，避免纯字典序导致的错误- 避免设置
caseFirst或alternate参数，它们可能会干扰拼音的主排序逻辑
具体代码示例：
const collator = new Intl.Collator('zh-CN', {
collation: 'pinyin',
sensitivity: 'base',
numeric: true
});
['张三', '李四', '王五'].sort(collator.compare); // 结果：['李四', '王五', '张三']（按拼音 li, wang, zhang 排序）
实现部首与笔画排序：需借助外部映射表，Intl.Collator 原生不支持
目前，所有主流浏览器均未实现 collation: 'radical'（部首）或 collation: 'stroke'（笔画）这类排序规则。若您的应用场景严格遵循《康熙字典》214部首顺序或汉字总笔画数进行排序（例如古籍数字化、汉字学习系统），则无法直接使用 Intl.Collator，必须通过自定义逻辑实现：
- 借助可靠的汉字基础数据库（如
chinese-character-dbnpm 包或 OpenCC 项目的字典文件）生成部首与笔画的映射表 - 为每个汉字查询其「部首编号」与「剩余笔画数」，并组合成可排序的元组，例如「江」字可能映射为
[85, 3]（部首编号85，剩余3画） - 在排序比较时，优先比较部首编号，再比较剩余笔画数，最后可回退至拼音排序作为补充
重要提示：不同规范（如《康熙字典》与《新华字典》）对笔画的计算方式存在差异（是否包含部首本身的笔画），实施前务必与业务规则保持一致。
处理多级混合排序：避免误用 collator.compare 函数
在实际业务中，数据列表往往需要「先按类别分组，组内再按中文名称的拼音排序」。此时不能简单地调用 arr.sort(collator.compare)，因为 compare 函数仅处理字符串，无法识别其他字段。正确的做法是编写完整的自定义比较函数：
const nameCollator = new Intl.Collator('zh-CN', { collation: 'pinyin', sensitivity: 'base' });
data.sort((a, b) => {
if (a.category !== b.category) {
return a.category.localeCompare(b.category); // 分类字段使用常规字符串比较即可
}
return nameCollator.compare(a.name, b.name); // 同一分类内，使用拼音排序器比较名称
});
一个容易被忽视的细节是：如果 a.name 或 b.name 的值为 null、undefined、数字或对象，compare() 方法会将其隐式转换为字符串（例如 undefined 变成 `'undefined'`），从而导致排序混乱。务必在排序前进行数据清洗或提供合理的默认值。
