JavaScript解決漢字轉拼音的實例詳解

一.漢字轉拼音的現狀

首先應該說，漢字轉拼音是個強需求，例如聯絡人按拼音字母排序／篩選；例如目的地（典型如機票購買）
按拼音首字母分類等等。但是這個需求的解決方案，但好像沒聽過什麼巧妙的實現（特別是瀏覽器端），大概都需要一個龐大的字典。
具體到JavaScript，查查github和npm，比較優秀的處理漢字轉拼音的庫有pinyin
和pinyinjs，可以看到，兩者都自帶了龐大的字典。
這些字典動輒幾十上百KB（有的甚至幾MB），想在瀏覽器端使用還是需要一些勇氣的。所以當我們碰到漢字轉拼音的需求，也不怪我們第一個反應就是拒絕需求（或是服務端實現）。
現在，如果我告訴你可以瀏覽器端300行程式碼實現漢字轉拼音，是不是不可置信？

二.從安卓4.2.2聯絡人程式碼說起

#再次強調這篇部落格－利用Android源碼，輕鬆實現漢字轉拼音功能。
今天和大家分享一個從Android系統原始碼提取出來的漢字轉成拼音實現方案，只要一個類，560多行代碼就可以讓你輕鬆實現漢字轉成拼音的功能，且無需其他任何第三方依賴。
是不是打破了你的思維定勢：難道有什麼強大的演算法可以拋棄字典？
第一遍看完博客，稍有些失望，並沒有什麼演算法解析，只是介紹了從安卓程式碼發現的這幾百行程式碼。第二遍時帶著移植到JavaScript的想法閱讀程式碼，算是弄清楚了原理，於是開始了踩坑的移植之旅。

三.手把手教你300行JavaScript程式碼實現漢字轉拼音

首先直指核心：為什麼有漢字轉拼音必須有龐大字典的思維定勢？
因為漢字的排布和拼音並有什麼關聯，例如在漢字區間\u4E00-\u9FFF，前一個可能是ha，後一個可能就是ze，沒有辦法從漢字的unicode關聯到拼音，所以只能有一個龐大的字典記錄每個漢字（或常用漢字）的拼音。
但是，假設我們可以把所有漢字按拼音排序，例如按'A','AI','AN','ANG','AO','BA',...,'ZUI',' ZUN','ZUO'排序，那麼，我們只需要記住每個相同拼音的漢字隊列的第一個漢字就好了。那麼，所需要的字典就會很小（覆蓋所有拼音即可，拼音數量本身不多）。
現在，難點就是把漢字按拼音排序了。很幸運，ICU/在地化相關的API提供了這個排序API（如果沒有方便的排序／比較方法，那麼本篇文章可能就不會出現了）。

所以，這就是為什麼300行可以實現漢字轉拼音：Intl.Collat​​orAPI：Intl.Collat​​or內部實作了本土化相關的字串排序。我們透過Intl.Collat​​or.prototype.compare可以把所有漢字基本上都按照拼音來排序。
邊界漢字表：記錄了排序的邊界點。此漢字表的每個漢字都是排序後相同拼音的漢字集合的首個漢字（Eachunihansisthefirstonewithinsamepinyinwhencollat​​oriszh_CN）。
說到這裡，可能還是有沒說清楚的地方，所以直接上一段程式碼：

 

有興趣的同學可以執行node--icu-data-dir=node_modules/full-icu上面的腳本.js看看，然後看看是不是得到了基本按照拼音排序的漢字表。

這裡有幾點要注意：

我再次加粗了“基本”，因為我們得到的漢字列表並沒有完全按照拼音來排序，中間偶爾有一些其它拼音的漢字插入，這點在製作邊界表時要額外注意。
上面腳本裡得出的表是所有漢字的排序，其中有些和安卓程式碼裡HanziToPinyin.java的表有不同，所以需要更新HanziToPinyin.java的表。 （從Java到JavaScript的最大的坑和工作量：更正邊界表）
相信大家都看到了核心代碼：constCOLLATOR=newIntl.Collat​​or(['zh-Hans-CN'])，Intl.Collat​​or
（這裡指定locale是中國zh-Hans-CN）正是能把漢字依拼音排序的關鍵，它是依照locale-specific順序，排序字串的InternationalizationAPI。
執行腳本時請先npmifull-icu，這個依賴會自動安裝缺少的中文支援並提示如何指定ICU資料檔來執行腳本。
1.ICUICU即InternationalComponentsforUnicode，為應用程式提供Unicode和國際化支援。
ICUisamature,widelyusedsetofC/C++andJavalibrariesprovidingUnicodeandGlobalizationsupportforsoftwareapplications.ICUiswidelyportableandgivesapplicationsthesameresultsonallplatformsandbetweenC/C++andJava0.##stris#S;#Sid; ingtotheconventionsandstandardsofaparticularlanguage,regionorcountry. ICU'scollat​​ionisbasedontheUnicodeCollat​​ionAlgorithmpluslocale-specificcomparisonrulesfromtheCommonLocaleDataRepository,acomprehensivesourceforthistypeofdata.
在現代瀏覽器上，一般ICU內建了對使用者本地語言的支持，我們直接使用即可。
但對node.js來說，通常情況下，ICU只包含了一個子集（通常是英文），所以我們需要自行加入對中文的支援。一般來說，可以透過npminstallfull-icu安裝full-icu
來安裝缺少的中文支援。 (參見上面node--icu-data-dir=node_modules/full-icu）。
2.IntlAPI上一小節應該基本上講清楚了國際化/在地化相關的知識，這裡再補充一下內建API的使用。怎麼查看使用者語言和Runtime是否支援這個語言？ Intl.Collat​​or.supportedLocalesOf(array|string)
傳回包含支援（不用回退到預設locale）的locales的
陣列
，參數可以是陣列或字串，為想要測試的locales（即BCP47languagetag）。

建構Collat​​or

物件

與排序字串

透過Intl.Collat​​or.prototype. compare，我們可以按語言指定的順序來排序字串。而中文中，這個排序恰好絕大多數都是按拼音的順序來的，'A','AI','AN','ANG','AO','BA','BAI','BAN' ,'BANG','BAO','BEI','BEN','BENG','BI','BIAN','BIAO','BIE','BIN','BING','BO',' BU','CA','CAI','CAN',...

，這正是我們上面提到的漢字轉拼音的關鍵。

四.邊界表修正

# 顯然，這個邊界表是有問題的，需要修正。

我們可以看到，大部分的漢字被轉成了qing，可見，qing這個拼音對應的漢字有問題。

找到這個漢字，是'\u72c5'/'狅'，加上前後各一個字，['\u4eb2','\u72c5','\u828e']/["親","狅", "芎"]
。

搜尋
，'\u72c5'/'狅'可以讀qing，但現在多讀kuang，這應該是錯誤的原因了。 根據最初得到那張所有漢字的排序表，qing的第一個漢字是'\u9751'/'靑'。 改動後，轉換失敗的只剩104了。

 

【相關推薦】

1. 

Javacript免費影片教學

2. 

#分享15個常用的js正規表示式

3. 

透過ja​​vascript實作搜尋工具列的實例詳解

4. 

Javascript中關於async以及awai的用法具體介紹

5. 關於JavaScript中最實用的12個技巧分享

以上是JavaScript解決漢字轉拼音的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！