開發小技巧之:unicode的排序和正則匹配

flydean發表於2021-07-06

簡介

我們知道計算機最先興起是在國外,出於當時計算機效能的考慮和外國常用字元的考慮,最開始計算機使用的是ASCII,ASCII編碼能夠表示的字元畢竟是有限的,隨著計算機的發展和全世界範圍的流行,需要更多的能夠表示世界各地字元的編碼方式,這種編碼方式就是unicode。

當然在unicode出現之前,各個國家或者地區根據本國的字元需求都制定過本國的編碼標準,當然這些編碼標準都是本地化的,不適用於全世界,所以並沒有得到普及。

今天我們來討論一下unicode編碼的字元進行排序和正則匹配的問題。

ASCII字元的排序

ASCII的全稱叫做American Standard Code for Information Interchange,也就是美國資訊交換標準程式碼,到目前為止,ASCII只有128個字元。這裡不詳細討論ASCII字元的構成。感興趣的同學可以檢視我之前寫的關於unicode的文章。

ASCII字元包含了26個字母,我們看下在javaScript中怎麼對ASCII字元編碼的:

const words = ['Boy', 'Apple', 'Bee', 'Cat', 'Dog'];
words.sort();
// [ 'Apple', 'Bee', 'Boy', 'Cat', 'Dog' ]

可以看到,這些字元是按照我們想要的字典的順序進行排序的。

但是如果你將這些字元修改成中文,再進行排序,那麼就得到的並不是我們想要的結果:

const words = ['愛', '我', '中', '華'];
words.sort();
// [ '中', '華', '我', '愛' ]

這是為什麼呢?

其實預設的這種sort是將字串轉換成位元組,然後按照位元組進行字典順序排序。如果是中文,那麼並不會將其進行本地文字的轉換。

本地字元的排序

既然使用ASCII字元不能對中文進行排序,那麼我們其實是想將漢字轉換為拼音,然後按照拼音字母的順序來對其排序。

所以上面的”愛我中華“實際上是要比較”ai“、”wo“、”zhong“、”hua“ 這幾個拼音的順序。

有什麼簡單的方法來進行比較嗎?

在一些瀏覽器中提供了Intl.Collator和String.prototype.localCompare兩種方法來進行本地字元的比較。

比如我在chrome 91.0版本中:

使用Intl.Collator是可以得到結果的,而使用String.prototype.localCompare並不行。

再看下在firfox 89.0版本中:

結果和chrome是一致的。

下面是在nodejs v12.13.1版本的執行結果:

可以看到在nodejs中,並沒有進行本地字元的轉換和排序。

所以,上述的兩個方法是和瀏覽器有關係的,也就是說和具體的實現是相關的。我們並不能完全對其信任。

所以,要給字串進行排序是一件非常傻的事情!

為什麼不使用unicode進行排序

那麼為什麼不使用unicode進行排序呢?

首先,對於普通使用者來說,他們並不知道unicode,他們所需要的也就是將字串轉換為本地語言進行字典排序。

其次,即使使用本地字元進行排序也是非常困難的一件事情,因為瀏覽器需要對不同的語言進行本地化排序支援。這使得工作量變得巨大。

emoji的正則匹配

文章最後,我們來講一下emoji的正則匹配問題。

emoji是一系列的表情,我們可以使用unicode來對其表示,但是emoji表情非常多,差不多有3521個,如果要對emoji進行正則匹配,我們需要寫出下面的程式碼:

(?:\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c\udffc|\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d
[... 後面省略很多]

以一個影像來直觀的看一下emoji表情有多少:

這麼多的emoji,有沒有簡單的辦法對其進行正則匹配呢?答案是有的。

早在ECMAScript的TC39提議裡面,就已經把emoji的正則匹配加入了標準之中,我們可以使用{Emoji_Presentation}來表示。

\p{Emoji_Presentation}

是不是很簡單?

總結

本文簡單介紹了本地字元的排序規則和emoji表情的正則匹配。希望能夠給大家在實際工作中帶來幫助。

本文已收錄於 http://www.flydean.com/04-unicode-sorting/

最通俗的解讀,最深刻的乾貨,最簡潔的教程,眾多你不知道的小技巧等你來發現!

相關文章