localecompare 默认行为不等于字典序排序，必须显式指定 locales 和 options（如 sensitivity: 'base'、numeric: true）才能实现可移植、多语言安全的排序。
localeCompare 默认行为不等于字典序排序
localeCompare 看似能直接解决多语言排序，但默认调用时它只按当前运行环境的 Intl.Locales（通常是系统 locale）做比较，不是“通用多语言排序”。比如在中文环境跑 ['café', 'casa', 'čaj']，č 可能被当成 c 处理，排到 casa 后面，而实际在捷克语中 č 是独立字母、应排在 c 之后 d 之前。
必须显式传入 locales 和 options 参数，否则排序结果不可移植、不可预测。
- 不指定
locales：依赖navigator.language或 Node.js 的process.env.LC_ALL，CI 环境或 Docker 容器里常是C或en-US，导致测试通过但线上乱序 - 不传
sensitivity: 'base'：大小写、重音符号会被当作不同字符区分，É和é可能分开放，而多数语言排序时忽略大小写和重音（如德语电话簿） - 浏览器兼容性要注意：Safari 14+ 才支持
numeric: true，旧版会静默忽略该选项
正确调用 sort + localeCompare 的最小安全写法
对一组混合语言字符串（如用户姓名列表），最稳妥的通用做法是用 en-US 做基础排序，再根据目标语言微调。但若明确知道数据语言，就该锁定对应 locale：
const names = ['Zoë', 'Álvaro', 'Björn', 'Łukasz', 'Müller'];
names.sort((a, b) => a.localeCompare(b, 'en-US', {
sensitivity: 'base',
numeric: true
}));
这个配置意味着：忽略大小写和重音差异（sensitivity: 'base'），数字部分按数值而非字符串比（item2 排在 item10 前），且强制使用美式英语规则——它对拉丁扩展字符（á, ñ, ø）有较完备支持。
- 如果数据全是德语，改用
'de'；全是日语，用'ja'；但别用'auto'—— 它不是标准值，Chrome 支持但 Firefox 不认 -
caseFirst: 'upper'仅在需要大写字母优先时加（如某些目录索引），默认不用设 - Node.js 中需确保 ICU 数据完整：Ubuntu 上装
icu-devtools，Alpine 用apk add icu-data-full，否则localeCompare对非 ASCII 字符返回 0
处理混合语言数据的现实策略
真实业务里，一个数组往往含中、英、日、阿拉伯文混排（如国际化产品名）。此时无法靠单个 locale 正确排序——日语的「さ」和英文的 sa 在不同 locale 下相对位置不同。
可行解是分组 + 拼接，而非强行统一 locale：
function sortMixed(arr) {
const zh = arr.filter(s => /[\u4e00-\u9fa5]/.test(s));
const ja = arr.filter(s => /[\u3040-\u309f\u30a0-\u30ff]/.test(s));
const rest = arr.filter(s => !/[\u4e00-\u9fa5\u3040-\u309f\u30a0-\u30ff]/.test(s));
return [
...zh.sort((a, b) => a.localeCompare(b, 'zh-Hans')),
...ja.sort((a, b) => a.localeCompare(b, 'ja')),
...rest.sort((a, b) => a.localeCompare(b, 'en-US', { sensitivity: 'base' }))
];
}
- 正则判断语言只是粗筛，不能替代 CLD（Compact Language Detector）等专业库，但对大多数前端场景够用
- 不要试图用
localeCompare的usage: 'search'来模糊匹配——它影响的是匹配逻辑，不改变排序顺序 - 服务端排序更可靠：PostgreSQL 的
COLLATE "und-x-icu"或 MySQL 8.0+ 的utf8mb4_0900_as_cs能提供一致 ICU 行为
Vue/React 中响应式排序的陷阱
在组件内直接对 props 或 state 数组调用 sort() 会修改原数组，触发不必要的 re-render 或打破 immutable 原则。
- Vue 2：用
[...arr].sort(...)创建副本；Vue 3 的ref同理，别对unref(arr).sort(...)原地操作 - React：确保
useMemo的 deps 包含所有影响排序的变量，包括 locale 设置项；否则用户切语言后列表不更新 - 避免在
render函数里反复调用localeCompare：1000 条数据排序可能触发上万次 ICU 调用，CPU 占用飙升。先计算 key 再排序（map(x => ({ x, key: x.toLocaleLowerCase('en-US') })).sort(...)）
真正难的不是写对一行 sort，而是确认你的 locale 数据源是否可信、ICU 版本是否一致、以及混合文本有没有隐式语言标记（比如带 lang="ar" 的 HTML 元素）。这些细节不处理，排序结果在不同机器上就是随机的。
