localeCompare() 方法的使用

前言 - Prologue

在多語言環境中，準確的字串比較和排序是至關重要的。

JavaScript 的 localeCompare() 提供了一個強大的解決方案。

它考慮不同語言的文化規則和排序慣例，使開發者能夠根據特定的區域設定進行精確的字串操作。

正文 - Main text

localeCompare() 是一個 JavaScript 字串方法，用於比較兩個字串的排序順序，並根據當前區域設定進行比較。它可以幫助程式開發者在不同語言和文化環境下進行字串比較和排序。

localeCompare() 的語法如下：

str.localeCompare(compareString)
str.localeCompare(compareString, locales)
str.localeCompare(compareString, locales, options)

# 等同於
str.localeCompare(compareString[, locales[, options]])

參數的解釋：

compareString：要與原始字串 (referenceStr) 進行比較的字串。它可以是一個直接的字串值，或者是另一個字串變數。
locales（選擇性）：一個字串或字串數組，用於指定要使用的語言或區域設定。若不提供參數，則使用執行環境的默認區域設定。
options（選擇性）：一個處理輸出格式的物件，用於指定比較的其他選項。

localeCompare() 會返回一個數字值，表示兩個字串之間的比較結果，也就是 referenceStr 和 compareString的先後順序。

這個返回值可以有以下三種情況：

若回傳負數，表示 referenceStr 在 compareString 以先
若為正數，表示 referenceStr 在 compareString 以後
若回傳0，表示兩者相等

⚠️ 警告：不要依靠特定的回傳值，例如 -1 或是 1！
正數或是負數的回傳值在不同的瀏覽器(也包誇同一瀏覽器但不同版本）之間有可能會有所不同。因為 W3C 規範僅要求值得正負而已。也因此，某些瀏覽器可能會回傳 -2 、 2 甚至其他值。

需要額外注意的是，localeCompare() 基於當前的區域設定進行比較。

這意味著不同的區域設定可能會有不同的排序結果。

例如，在英文環境下，字母 'a' 排在字母 'b' 之前，而在德文環境下，字母 'a' 可能排在字母 'b' 之後。

下方示例為使用 localeCompare() 比較兩個字串：

const str1 = 'apple';
const str2 = 'banana';

console.log(str1.localeCompare(str2));
// -1

在上面的例子中，'apple' 排在 'banana' 之前，所以返回了 -1。

也可以指定特定的區域設定和選項，以控制比較的行為。例如：

const str1 = 'apple';
const str2 = 'banana';

console.log(str1.localeCompare(str2, 'en-US', { sensitivity: 'base' }));
// -1
console.log(str1.localeCompare(str2, 'de-DE', { sensitivity: 'base' }));
// 1

在上面的例子中，使用 'en-US' 和 'de-DE' 兩個不同的區域設定進行比較。由於 'en-US' 和 'de-DE' 在排序上有不同的規則，所以比較結果也不同。

透過 localeCompare() 方法，可根據不同的區域設定進行字串比較和排序，這對於多語言環境或需要根據當地文化進行排序的場景非常有用。

除了基本的使用方法，localeCompare() 還提供了其他一些選項和功能，讓程式開發者能更細緻地控制字串的比較和排序。

以下是一些進一步補充介紹：

忽略大小寫比較（sensitivity）

通常情況下，localeCompare() 是區分大小寫的，即大寫字母和小寫字母被視為不同的字符。

但我們可以使用 sensitivity 選項來控制大小寫敏感性。

選項值可以是 "base"、"accent" 或 "case"，預設值是 "variant"。例如：

const str1 = 'apple';
const str2 = 'Apple';

console.log(str1.localeCompare(str2, undefined, { sensitivity: 'base' }));
// 0
console.log(str1.localeCompare(str2, undefined, { sensitivity: 'accent' }));
// 1
console.log(str1.localeCompare(str2, undefined, { sensitivity: 'case' }));
// 0

在上面的例子中，sensitivity 選項的不同值導致了不同的比較結果。

排序順序（usage）

我們可以使用 usage 選項來指定排序的類型。

選項值可以是 "sort" 或 "search"，預設值是 "sort"。

"sort" 值用於一般排序場景，而 "search" 值則用於搜索和搜尋場景。例如：

const str1 = 'ä';
const str2 = 'a';

console.log(str1.localeCompare(str2, undefined, { usage: 'sort' }));
// 1
console.log(str1.localeCompare(str2, undefined, { usage: 'search' }));
// 0

在上面的例子中，"ä" 和 "a" 的排序結果取決於 usage 選項的不同值。

自訂排序順序（collation）

localeCompare() 還支援通過 collation 選項指定自訂的排序順序。

我們可以使用預定義的排序選項，如 "standard"、"dictionary"、"emoji" 等，也可以提供自訂的排序函數。例如：

const str1 = 'apple';
const str2 = 'banana';

const collator = new Intl.Collator(undefined, { sensitivity: 'base' });
console.log(collator.compare(str1, str2));
// -1

在上面的例子中，使用了 Intl.Collator 類別創建了一個排序器，並通過 compare() 方法進行比較。

支援不同語言（locales）

通過 locales 參數，我們可以指定要使用的語言或區域設定。

它可以是一個字串或字串數組。如果提供了多個語言，則會按照優先順序進行比較，直到找到適合的區域設定為止。

const str1 = 'apple';
const str2 = 'banana';

console.log(str1.localeCompare(str2, ['en-US', 'fr-FR']));
// -1

在這個例子中，首先使用 'en-US' 區域設定進行比較，如果它不適用，則使用 'fr-FR' 區域設定進行比較。

檢查瀏覽器對額外參數的支援度 (MDN docs)

並不是所有瀏覽器都支援 locales 和 options 參數。

要檢查是否支援，可以使用 "i" 參數（正常情況下，非正常的語言標籤會回報錯誤）並檢查是否有 RangeError exception：

function localeCompareSupportsLocales() {
  try {
    'foo'.localeCompare('bar', 'i');
  } catch (e) {
    return e.name === 'RangeError';
  }
  return false;
}