解決 Chrome 下 Javascript 中文排序問題

最近客戶反應，網頁上的中文排列順序，變得跟以前不太一樣，例如：

• 原本會按 "上午"、"下午"、"晚上" 排序，現在變成 "上午"、"晚上"、"下午"
• 原本會按 "一"、"二"、"三" 排序，現在變成 "二"、"三"、"一"

這件事的確離奇，不過讀者需要先瞭解的是，Javascript 能處理的中文排序，原本就跟我們的預期不太一樣，原理可參考「javascript 中文排序問題」，因此我也曾在「Blogger 樹狀標籤 V2.0」→ 「五、常見 FAQ」→ Q2 提醒，最好要排序的字串，前面加上英數字串，才能確保依照預期來排序。

然而客戶的網頁，以往中文排序都是在預期的狀態，直到最近才突然不正常，究竟是什麼原因引起，請見本篇的研究心得。

(圖片出處: pixabay.com)

一、只有 Chrome 異常

既然原本 JS 執行排序的邏輯沒問題，但現在的邏輯卻不一樣，第一個想到的，可能 JS 解析引擎是否不太一樣。由於 Chrome 常常更新版本，所以先測試 Chrome 狀況。

把同樣的網頁用 Chrome 以外的瀏覽器開啟，果然是正常的排序邏輯，只有 Chrome 的排序邏輯跟其他瀏覽器不同，那麼答案就出來了：

• Chrome 新版本的 JS，改變了中文排序邏輯

如果是市佔率低的瀏覽器(例如 IE)，還可以當作沒發生。偏偏 Chrome 是目前市面上最主要的瀏覽器，因此這是個必須立即解決的問題。

二、中文排序最佳解決方案

找到這篇文章，算是 JS 中文排序整理得最完整的：

• JavaScript 中文排序問題

大致整理一下排序邏輯的重點：

• Big 5 編碼：
  
  • 這是大家習慣的排序邏輯，大致上依照筆畫、四聲、部首這樣的順序來排序
  • 但 JS 做不到這樣的排序，因為沒有內建此模組，除非自行另外建立 Big5 排序模組。
  • 但這很麻煩，而且每次執行 JS 都得另外載入這個龐大的模組。
• 使用 sort() 排序：
  
  • 依照 Unicode 編碼的順序排序，算是效果很差的中文排序方式
• sort() 結合 localeCompare() 不指定語系排序：
  
  • 每個瀏覽器內建設定不同，無法得到跨瀏覽器效果
  • Chrome 以外的瀏覽器，排序效果接近 Big 5，已經是可接受的狀態
  • Chrome 瀏覽器的效果等同 sort()
• sort() 結合 localeCompare() 指定語系 zh-hant：
  
  • 可得到跨瀏覽器一致的效果
  • 排序效果接近 Big 5(有些為差異，邏輯未知)
• sort() 結合 localeCompare() 指定語系 zh-TW：
  
  • 效果等同指定語系 "zh"，會依照簡體拼音排序

三、新版 Chrome 為何異常

藉由前述參考文章「黑暗執行緒」提供的範例程式碼，我們得到的其中一個結論是：

• Chrome 使用 sort() 的效果，等於 localeCompare() 不指定語系排序效果

但現在使用 Chrome 執行修改後的範例程式碼，來看看為何最近 Chrome 更新後中文排序異常：

<script>
var str = "上下晚一二三四五";
var array = [];
for (var i = 0; i < str.length; i++)
array.push(str.substr(i, 1));
array.sort();
document.write("內建 sort()<br />")
document.write(JSON.stringify(array, null, " "));
document.write("<hr />")
array.sort(function(a, b) {
return a.localeCompare(b);
});
document.write("localeCompare 排序<br />")
document.write(JSON.stringify(array, null, " "));
document.write("<hr />")
array.sort(function(a, b) {
return a.localeCompare(b, "zh-TW");
});
document.write("localeCompare zh-TW 排序<br />")
document.write(JSON.stringify(array, null, " "));
</script>

執行結果如下：

內建 sort()
[ "一", "三", "上", "下", "二", "五", "四", "晚" ]

localeCompare 排序
[ "二", "三", "上", "四", "晚", "五", "下", "一" ]

localeCompare zh-TW 排序
[ "二", "三", "上", "四", "晚", "五", "下", "一" ]

這樣就找出原因了，新版 Chrome 之下，localeCompare() 不指定語系的排序效果，完全看不出邏輯，效果完全等同於設定了語系 "zh-TW" 之後的排序，也就是依照簡體拼音進行排序。

我們可以歸納出，新版 Chrome 會自動幫 localeCompare() 設定語系，且幫繁體語系設定了 "zh-TW"，偏偏這是錯誤的設定。

因為根據前述「黑暗執行緒」這篇參考文章，留言有讀者提到，"zh-TW" 會被自動判讀為簡體拼音編碼！

而正確的語系設定，應該為 "zh-hant" 才對。

四、跨瀏覽器一致的語法

所以最後總結一下，JS 使用 sort 對中文進行排序時，請使用以下的語法：

<script>
var array = ["上午", "下午", "晚上", "一", "二", "三"];
array.sort(function(a, b) {
return a.localeCompare(b, "zh-hant");
});
document.write("中文正確排序<br />");
document.write(array);
</script>
如此就能得到：

• 跨瀏覽器一致的排序效果
• 接近 Big5 編碼的排序效果

更多 Javascript 相關技巧：