如何使用JavaScript正确地按字母顺序对带有特殊字符的字符串数组进行排序

本文概述

• 使用localeCompare的解决方案
• 使用Intl.Collat​​or的解决方案

在英语不是母语的国家/地区, 开发人员通常在使用特殊字符和带有重音的单词时会遇到很多问题, 例如：

• 塞迪尔(塞迪利亚)Ç…
• 口音aigu(急性口音)é…
• 重音符号circonflexe(circumflex)â, ê, î, ô, û…
• 重音(grave accent)à, è, ù…
• 重音符号(dieresis / umlaut)ë, ï, ü

例如, 在JavaScript中, 对不包含此类字符的字符串进行单词数组排序非常容易, 例如：

['Bogotá', 'Bucaramanga', 'Cali', 'Santa Marta', 'Cartagena'].sort();
// This will sort as
//  ["Bogotá", "Bucaramanga", "Cali", "Cartagena", "Santa Marta"]

JavaScript的sort函数会自动为你解决问题。可悲的是, 当你将提到的字符作为第一个字符排序时, 例如德语单词, 你会得到奇怪的结果：

['Bären', 'küssen', 'Käfer', 'Ähnlich', 'Äpfel'].sort();
// This will sort as
// ["Bären", "Käfer", "küssen", "Ähnlich", "Äpfel"]

可怜的德国人……这不是每个人都期望的”字母顺序”命令, 而是我们希望得到的结果[“Ähnlich”, “Äpfel”, “Bären”, “Käfer”, “küssen”]。但是, 此问题的解决方案非常简单, 它也依赖于JavaScript的本机排序函数, 但相反, 我们将修改作为第一个参数接收的compareFunction。 sort函数的第一个参数指定一个定义排序顺序的函数。如果省略, 则将数组元素转换为字符串, 然后根据每个字符的Unicode代码点值进行排序。

使用localeCompare的解决方案

正确地对字符串数组进行排序的第一个选项是提供字符串的localeCompare方法作为比较器, 该方法返回一个数字, 该数字指示参考字符串是按排序顺序位于给定字符串之前还是之后还是与给定字符串相同。例如：

['Bären', 'küssen', 'Käfer', 'Ähnlich', 'Äpfel'].sort(function (a, b) {
    return a.localeCompare(b);
});

// This sorts as:
// ["Ähnlich", "Äpfel", "Bären", "Käfer", "küssen"]

使用Intl.Collat​​or的解决方案

使用特殊字符对字符串数组进行排序的第二种方法是使用Intl.Collat​​or对象作为比较器。该对象是整理程序的构造函数, 该整理程序使语言敏感的字符串比较成为可能。例如：

['Bären', 'küssen', 'Käfer', 'Ähnlich', 'Äpfel '].sort(Intl.Collator().compare);
// This will sort as:
// ["Ähnlich", "Äpfel ", "Bären", "Käfer", "küssen"]

根据一些测试, 比较大量字符串时, Intl.Collat​​or实现最终比localeCompare快得多。

编码愉快！