使用 localeCompare 對數組排序時順序錯亂

問題描述：

使用 localeCompare 對一個字符串數組按名稱排序

const arr = ['我', 'B', 'c', 'C', 'b', '幹活', '233', '1024', '211', '喫飯'];

arr.sort((a, b) => a.localeCompare(b));
// ["1024", "211", "233", "喫飯", "幹活", "我", "b", "B", "c", "C"]

但在 Mac 和 Windows 上對大小寫字母的排序規則不一致

而且在中文環境下，默認的排序順序是：數字 > 中文 > 字母，產品需要改爲：數字 > 字母 > 中文

 

 

分析原因：

localeCompare 可以傳入第二個參數 locales 和第三個參數 options 來控制排序規則

如果沒有傳入這兩個參數，localeCompare 就會讀取當前系統配置的語言環境，最終的結果就會有差異

 

 

解決方案：

一般情況下，傳入 locales 就可以了

數字 > 中文 > 小寫字母 > 大寫字母

arr.sort((a, b) => a.localeCompare(b, 'zh-CN-u-kf-lower'));
// ["1024","211","233","喫飯","幹活","我","b","B","c","C"]

 

數字 > 中文 > 大寫字母 > 小寫字母

arr.sort((a, b) => a.localeCompare(b, 'zh-CN-u-kf-upper'));
// ["1024","211","233","喫飯","幹活","我","B","b","C","c"]

 

數字 >小寫字母 > 大寫字母 >  中文

arr.sort((a, b) => a.localeCompare(b, 'en-US-u-kf-lower'));
// ["1024","211","233","b","B","c","C","喫飯","幹活","我"]

 

數字 > 大寫字母 > 小寫字母 >  中文

arr.sort((a, b) => a.localeCompare(b, 'en-US-u-kf-upper'));
// ["1024","211","233","B","b","C","c","喫飯","幹活","我"]