如何用 Intl.Collator 实现包含拼音、部首等本地化语义的复杂中文数据列表精准排序

如何利用 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-db npm 包或 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'`），从而导致排序混乱。务必在排序前进行数据清洗或提供合理的默认值。