JavaScript Academy · 课时

符合区域设置的排序

Q: 「符合区域设置的排序」这节课中我会学到什么？

使用 Intl.Collator 正确排序字符串。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Intl.Collator 正确排序字符串。

符合区域设置的排序 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

默认排序为何会失败

数组的 sort() 会根据 UTF-16 代码单元比较字符串。这会将大写字母排在小写字母之前，并且无法正确处理重音符号，因此不适合面向用户的列表。

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort()); // ["Apple","banana","cherry"] — capital wins

localeCompare

String.prototype.localeCompare 会根据区域设置规则比较两个字符串，并返回负数、零或正数。

console.log("apple".localeCompare("banana")); // -1
console.log("banana".localeCompare("apple")); // 1

使用 localeCompare 排序

将它作为比较器传入，即可获得符合用户习惯的排序顺序。

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort((a, b) => a.localeCompare(b)));
// ["Apple", "banana", "cherry"] — case-insensitive ordering

Intl.Collator

对大量项目进行排序时，Intl.Collator 速度更快：创建一次，然后重复使用它的 compare 方法。

const collator = new Intl.Collator("en-US");
const words = ["banana", "Apple", "cherry"];
console.log([...words].sort(collator.compare));

重音符号与附加符号

与代码单元比较不同，整理器会根据区域设置正确排列带重音符号的字符。

const words = ["zebra", "ela", "elf", "elan"];
const collator = new Intl.Collator("fr");
console.log([...words].sort(collator.compare));

敏感度

sensitivity 控制哪些差异需要区分："base" 忽略大小写和重音符号，"accent" 只忽略大小写，"variant" 则区分所有差异。

const c = new Intl.Collator("en", { sensitivity: "base" });
console.log(c.compare("apple", "APPLE")); // 0 (treated equal)

数字排序

numeric: true 会按照数值对字符串中包含的数字进行排序，因此“file2”会排在“file10”之前。

const files = ["file10", "file2", "file1"];
const c = new Intl.Collator("en", { numeric: true });
console.log([...files].sort(c.compare)); // ["file1","file2","file10"]

大小写优先顺序

caseFirst: "upper" 或 "lower" 决定在其他差异相同时，大写字母还是小写字母排在前面。

const c = new Intl.Collator("en", { caseFirst: "upper" });
console.log(["b", "B", "a", "A"].sort(c.compare));

排序顺序取决于区域设置

不同语言的字母排序方式不同。在瑞典语中，某些带附加符号的字母会排在 z 之后，而不是排在 a 附近。

const words = ["z", "a", "o"];
console.log([...words].sort(new Intl.Collator("sv").compare));

使用搜索用途

usage: "search" 会将整理器调整为匹配模式，而不是排序模式，适合进行不区分重音符号的筛选。

const c = new Intl.Collator("en", { usage: "search", sensitivity: "base" });
function matches(a, b) { return c.compare(a, b) === 0; }
console.log(matches("cafe", "CAFE")); // true

对对象排序

对对象数组排序时，请在指定键上使用整理器。

const people = [{ name: "Bob" }, { name: "alice" }, { name: "Carol" }];
const c = new Intl.Collator("en");
console.log(people.sort((a, b) => c.compare(a.name, b.name)).map((p) => p.name));

快速检查

测试区域设置感知的排序。

回顾：区域设置感知的排序

您了解了默认的 sort() 为何不适用，使用了 localeCompare 和速度更快的 Intl.Collator，处理了重音符号、敏感度、数字和大小写顺序、区域设置特有的字母表以及搜索匹配。至此，Intl 课程就完成了。

常见问题解答

「符合区域设置的排序」课时是免费的吗？

是的 — 「符合区域设置的排序」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「符合区域设置的排序」这节课中我会学到什么？

使用 Intl.Collator 正确排序字符串。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「符合区域设置的排序」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy