神級(jí)程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音
一.漢字轉(zhuǎn)拼音的現(xiàn)狀
首先應(yīng)該說(shuō),漢字轉(zhuǎn)拼音是個(gè)強(qiáng)需求,比如聯(lián)系人按拼音字母排序/篩選;比如目的地(典型如機(jī)票購(gòu)買(mǎi))
按拼音首字母分類(lèi)等等。但是這個(gè)需求的解決方案,但好像沒(méi)聽(tīng)過(guò)什么巧妙的實(shí)現(xiàn)(特別是瀏覽器端),大概都需要一個(gè)龐大的字典。
具體到JavaScript,查查github和npm,比較優(yōu)秀的處理漢字轉(zhuǎn)拼音的庫(kù)有pinyin
和pinyinjs,可以看到,兩者都自帶了龐大的字典。
這些字典動(dòng)輒幾十上百KB(有的甚至幾MB),想在瀏覽器端使用還是需要一些勇氣的。所以當(dāng)我們碰到漢字轉(zhuǎn)拼音的需求,也不怪我們第一反應(yīng)就是拒絕需求(或者服務(wù)端實(shí)現(xiàn))。
現(xiàn)在,如果我告訴你可以瀏覽器端300行代碼實(shí)現(xiàn)漢字轉(zhuǎn)拼音,是不是不可置信?
二.從安卓4.2.2聯(lián)系人代碼說(shuō)起
再次強(qiáng)調(diào)這篇博客——利用Android源碼,輕松實(shí)現(xiàn)漢字轉(zhuǎn)拼音功能。
今天和大家分享一個(gè)從Android系統(tǒng)源代碼提取出來(lái)的漢字轉(zhuǎn)成拼音實(shí)現(xiàn)方案,只要一個(gè)類(lèi),560多行代碼就可以讓你輕松實(shí)現(xiàn)漢字轉(zhuǎn)成拼音的功能,且無(wú)需其他任何第三方依賴(lài)。
是不是打破了你的思維定勢(shì):難道有什么強(qiáng)大的算法可以?huà)仐壸值洌?br />
第一遍看完博客,稍有些失望,并沒(méi)有什么算法解析,只是介紹了從安卓代碼發(fā)現(xiàn)的這幾百行代碼。第二遍時(shí)帶著移植到JavaScript的想法閱讀代碼,算是弄懂了原理,于是開(kāi)始了踩坑的移植之旅。
三.手把手教你300行JavaScript代碼實(shí)現(xiàn)漢字轉(zhuǎn)拼音
首先直指核心:為什么有漢字轉(zhuǎn)拼音必須有龐大字典的思維定勢(shì)?
因?yàn)闈h字的排布和拼音并有什么關(guān)聯(lián),比如在漢字區(qū)間\u4E00-\u9FFF,前一個(gè)可能是ha,后一個(gè)可能就是ze,沒(méi)有辦法從漢字的unicode關(guān)聯(lián)到拼音,所以只能有一個(gè)龐大的字典記錄每個(gè)漢字(或常用漢字)的拼音。
但是,假設(shè)我們可以把所有漢字按拼音排序,比如按'A','AI','AN','ANG','AO','BA',...,'ZUI','ZUN','ZUO'排序,那么,我們只需要記住每個(gè)相同拼音的漢字隊(duì)列的第一個(gè)漢字就好了。那么,所需要的字典就會(huì)很?。ǜ采w所有拼音即可,拼音數(shù)量本身不多)。
現(xiàn)在,難點(diǎn)就是把漢字按拼音排序了。很幸運(yùn),ICU/本地化相關(guān)的API提供了這個(gè)排序API(如果沒(méi)有方便的排序/比較方法,那么本篇文章可能就不會(huì)出現(xiàn)了)。
所以,這就是為什么300行可以實(shí)現(xiàn)漢字轉(zhuǎn)拼音:Intl.CollatorAPI:Intl.Collator內(nèi)部實(shí)現(xiàn)了本土化相關(guān)的字符串排序。我們通過(guò)Intl.Collator.prototype.compare可以把所有漢字基本按照拼音來(lái)排序。
邊界漢字表:記錄了排序的邊界點(diǎn)。該漢字表的每個(gè)漢字都是排序后相同拼音的漢字集合的首個(gè)漢字(Eachunihansisthefirstonewithinsamepinyinwhencollatoriszh_CN)。
說(shuō)到這里,可能仍然有沒(méi)說(shuō)清楚的地方,所以直接上一段代碼:
有興趣的同學(xué)可以執(zhí)行node--icu-data-dir=node_modules/full-icu上面的腳本.js看看,然后看看是不是得到了基本按照拼音排序的漢字表。
這里有幾點(diǎn)要注意:
我再次加粗了“基本”,因?yàn)槲覀兊玫降臐h字列表并沒(méi)有完全按照拼音來(lái)排序,中間偶爾有一些其它拼音的漢字插入,這點(diǎn)在制作邊界表時(shí)要額外注意。
上面腳本里得出的表是所有漢字的排序,其中有些和安卓代碼里HanziToPinyin.java的表有不同,所以需要更新HanziToPinyin.java的表。(從Java轉(zhuǎn)到JavaScript的最大的坑和工作量:更正邊界表)
相信大家都看到了核心代碼:constCOLLATOR=newIntl.Collator(['zh-Hans-CN']),Intl.Collator
(這里指定locale是中國(guó)zh-Hans-CN)正是能把漢字按拼音排序的關(guān)鍵,它是按locale-specific順序,排序字符串的InternationalizationAPI。
執(zhí)行腳本時(shí)請(qǐng)先npmifull-icu,這個(gè)依賴(lài)會(huì)自動(dòng)安裝缺失的中文支持并提示如何指定ICU數(shù)據(jù)文件來(lái)執(zhí)行腳本。
1.ICUICU即InternationalComponentsforUnicode,為應(yīng)用提供Unicode和國(guó)際化支持。
ICUisamature,widelyusedsetofC/C++andJavalibrariesprovidingUnicodeandGlobalizationsupportforsoftwareapplications.ICUiswidelyportableandgivesapplicationsthesameresultsonallplatformsandbetweenC/C++andJavasoftware.
并且ICU提供了本地化字符串比較服務(wù)(UnicodeCollationAlgorithm+本地特定的比較規(guī)則):
Collation:Comparestringsaccordingtotheconventionsandstandardsofaparticularlanguage,regionorcountry.ICU'scollationisbasedontheUnicodeCollationAlgorithmpluslocale-specificcomparisonrulesfromtheCommonLocaleDataRepository,acomprehensivesourceforthistypeofdata.
在現(xiàn)代瀏覽器上,一般ICU內(nèi)置了對(duì)用戶(hù)本地語(yǔ)言的支持,我們直接使用即可。
但對(duì)node.js來(lái)說(shuō),通常情況下,ICU只包含了一個(gè)子集(通常是英語(yǔ)),所以我們需要自行添加對(duì)中文的支持。一般來(lái)說(shuō),可以通過(guò)npminstallfull-icu安裝full-icu
來(lái)安裝缺失的中文支持。(參見(jiàn)上面node--icu-data-dir=node_modules/full-icu)。
2.IntlAPI上一小節(jié)應(yīng)該基本講清楚了國(guó)際化/本地化相關(guān)的知識(shí),這里再補(bǔ)充一下內(nèi)置API的使用。怎么查看用戶(hù)語(yǔ)言和Runtime是否支持這個(gè)語(yǔ)言?Intl.Collator.supportedLocalesOf(array|string)
返回包含支持(不用回退到默認(rèn)locale)的locales的數(shù)組,參數(shù)可以是數(shù)組或字符串,為想要測(cè)試的locales(即BCP47languagetag)。
構(gòu)造Collator對(duì)象和排序字符串
通過(guò)Intl.Collator.prototype.compare,我們可以按語(yǔ)言指定的順序來(lái)排序字符串。而中文中,這個(gè)排序恰好絕大多數(shù)都是按拼音的順序來(lái)的,'A','AI','AN','ANG','AO','BA','BAI','BAN','BANG','BAO','BEI','BEN','BENG','BI','BIAN','BIAO','BIE','BIN','BING','BO','BU','CA','CAI','CAN',...
,這正是我們上面提到的漢字轉(zhuǎn)拼音的關(guān)鍵。
四.邊界表更正
顯然,這個(gè)邊界表是有問(wèn)題的,需要更正。
我們可看到,大部分的漢字被轉(zhuǎn)成了qing,可見(jiàn),qing這個(gè)拼音對(duì)應(yīng)的漢字有問(wèn)題。
找到這個(gè)漢字,是'\u72c5'/'狅',加上前后各一個(gè)字,['\u4eb2','\u72c5','\u828e']/["親","狅","芎"]
。
搜索,'\u72c5'/'狅'可以讀qing,但現(xiàn)在多讀kuang,這應(yīng)該就是錯(cuò)誤的原因了。
根據(jù)最初得到那張所有漢字的排序表,qing的第一個(gè)漢字是'\u9751'/'靑'。
改動(dòng)后,轉(zhuǎn)換失敗的只剩104了。
- js漢字轉(zhuǎn)拼音實(shí)現(xiàn)代碼
- 用正則表達(dá)式判斷字符串是漢字還是拼音的js函數(shù)代碼
- javascript 漢字轉(zhuǎn)拼音實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)超簡(jiǎn)單的漢字轉(zhuǎn)拼音功能示例
- javascript漢字轉(zhuǎn)拼音的代碼
- javascript 漢字與拼音轉(zhuǎn)換
- JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音的庫(kù)文件示例
- Javascript實(shí)現(xiàn)漢字和拼音互轉(zhuǎn)的終極方案
- javascript漢字拼音互轉(zhuǎn)的簡(jiǎn)單實(shí)例
- JS實(shí)現(xiàn)中文漢字按拼音排序的方法
- JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法
相關(guān)文章
學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么
這篇文章主要介紹了學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么?在?JavaScript?中,?每當(dāng)創(chuàng)建一個(gè)函數(shù),?閉包就會(huì)在函數(shù)創(chuàng)建的同時(shí)被創(chuàng)建出來(lái),但是學(xué)習(xí)的時(shí)候我們應(yīng)該注意哪些問(wèn)題呢,帶著疑問(wèn)一起進(jìn)入下面文章學(xué)習(xí)具體內(nèi)容吧2022-06-06純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁(yè)面布局(實(shí)例代碼)
這篇文章主要介紹了純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁(yè)面布局,需要的朋友可以參考下2017-10-10javascript iframe中打開(kāi)文件,并檢測(cè)iframe存在否
從iframe中打開(kāi)文件,并檢測(cè)iframe存在否如果說(shuō)只是檢測(cè)頁(yè)面存在否,直接設(shè)置target用偽協(xié)議就可以解決了...2008-12-12用云開(kāi)發(fā)Cloudbase實(shí)現(xiàn)小程序多圖片內(nèi)容安全監(jiān)測(cè)的代碼詳解
這篇文章主要介紹了用云開(kāi)發(fā)Cloudbase實(shí)現(xiàn)小程序多圖片內(nèi)容安全監(jiān)測(cè),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06JS實(shí)現(xiàn)經(jīng)典的中國(guó)地區(qū)三級(jí)聯(lián)動(dòng)下拉菜單功能實(shí)例【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)經(jīng)典的中國(guó)地區(qū)三級(jí)聯(lián)動(dòng)下拉菜單功能,結(jié)合完整實(shí)例形式分析了javascript基于事件響應(yīng)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02Bootstrap基本布局實(shí)現(xiàn)方法詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本布局實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11