JavaScript 原生的 sort 方法讓我們可以排序陣列。做一個簡單的 array.sort()， 將每一個陣列元素視為字串並依字母排序。你可以提供你的自定義排序函式。

['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();
// ["Buenos Aires", "Mumbai", "New York", "Shanghai"]

但是當你嘗試排序一個非 ASCII 字元陣列像是： ['é', 'a', 'ú', 'c']，你會得到奇怪的結果： ['c', 'e', 'á', 'ú']。這個問題是因為排序功能只適用於英語。

請看以下的範例：

// 西班牙語
['único','árbol', 'cosas', 'fútbol'].sort();
// ["cosas", "fútbol", "árbol", "único"] // bad order

// 德文
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // bad order

幸運的是，有兩種方法可以解決這個問題，由 ECMAScript 國際化 API 提供的 localeCompare 和 Intl.Collator。

這兩種方法都有他們自己的自定義參數設置可以更有效的解決這個問題。

使用 localeCompare()

['único','árbol', 'cosas', 'fútbol'].sort(function (a, b) {
  return a.localeCompare(b);
});
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
  return a.localeCompare(b);
});
// ["Wann", "wäre", "Woche", "wöchentlich"]

使用 Intl.Collator()

['único','árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare);
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);
// ["Wann", "wäre", "Woche", "wöchentlich"]
  • 對於每一個方法，你可以自定義位置。
  • 根據 Firefox，當比對大量的字串時，Intl.Collator 會更加快速。

所以，當你在處理非英文語系的字串陣列時，記得使用這個方法來避免排序出現異常。