13518219792
這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何實(shí)現(xiàn)漢字轉(zhuǎn)拼音，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的莫力達(dá)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！一.漢字轉(zhuǎn)拼音的現(xiàn)狀
首先應(yīng)該說，漢字轉(zhuǎn)拼音是個(gè)強(qiáng)需求，比如聯(lián)系人按拼音字母排序／篩選；比如目的地（典型如機(jī)票購買）
按拼音首字母分類等等。但是這個(gè)需求的解決方案，但好像沒聽過什么巧妙的實(shí)現(xiàn)（特別是瀏覽器端），大概都需要一個(gè)龐大的字典。
具體到JavaScript，查查github和npm，比較優(yōu)秀的處理漢字轉(zhuǎn)拼音的庫有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)系人代碼說起
再次強(qiáng)調(diào)這篇博客——利用Android源碼，輕松實(shí)現(xiàn)漢字轉(zhuǎn)拼音功能。
今天和大家分享一個(gè)從Android系統(tǒng)源代碼提取出來的漢字轉(zhuǎn)成拼音實(shí)現(xiàn)方案，只要一個(gè)類，560多行代碼就可以讓你輕松實(shí)現(xiàn)漢字轉(zhuǎn)成拼音的功能，且無需其他任何第三方依賴。
是不是打破了你的思維定勢(shì)：難道有什么強(qiáng)大的算法可以拋棄字典？
第一遍看完博客，稍有些失望，并沒有什么算法解析，只是介紹了從安卓代碼發(fā)現(xiàn)的這幾百行代碼。第二遍時(shí)帶著移植到JavaScript的想法閱讀代碼，算是弄懂了原理，于是開始了踩坑的移植之旅。
三.手把手教你300行JavaScript代碼實(shí)現(xiàn)漢字轉(zhuǎn)拼音
首先直指核心：為什么有漢字轉(zhuǎn)拼音必須有龐大字典的思維定勢(shì)？
因?yàn)闈h字的排布和拼音并有什么關(guān)聯(lián)，比如在漢字區(qū)間\u4E00-\u9FFF，前一個(gè)可能是ha，后一個(gè)可能就是ze，沒有辦法從漢字的unicode關(guān)聯(lián)到拼音，所以只能有一個(gè)龐大的字典記錄每個(gè)漢字（或常用漢字）的拼音。
但是，假設(shè)我們可以把所有漢字按拼音排序，比如按'A','AI','AN','ANG','AO','BA',...,'ZUI','ZUN','ZUO'排序，那么，我們只需要記住每個(gè)相同拼音的漢字隊(duì)列的第一個(gè)漢字就好了。那么，所需要的字典就會(huì)很小（覆蓋所有拼音即可，拼音數(shù)量本身不多）。
現(xiàn)在，難點(diǎn)就是把漢字按拼音排序了。很幸運(yùn)，ICU/本地化相關(guān)的API提供了這個(gè)排序API（如果沒有方便的排序／比較方法，那么本篇文章可能就不會(huì)出現(xiàn)了）。
所以，這就是為什么300行可以實(shí)現(xiàn)漢字轉(zhuǎn)拼音：Intl.CollatorAPI：Intl.Collator內(nèi)部實(shí)現(xiàn)了本土化相關(guān)的字符串排序。我們通過Intl.Collator.prototype.compare可以把所有漢字基本按照拼音來排序。
邊界漢字表：記錄了排序的邊界點(diǎn)。該漢字表的每個(gè)漢字都是排序后相同拼音的漢字集合的首個(gè)漢字（Eachunihansisthefirstonewithinsamepinyinwhencollatoriszh_CN）。
說到這里，可能仍然有沒說清楚的地方，所以直接上一段代碼：
有興趣的同學(xué)可以執(zhí)行node--icu-data-dir=node_modules/full-icu上面的腳本.js看看，然后看看是不是得到了基本按照拼音排序的漢字表。
這里有幾點(diǎn)要注意：
我再次加粗了“基本”，因?yàn)槲覀兊玫降臐h字列表并沒有完全按照拼音來排序，中間偶爾有一些其它拼音的漢字插入，這點(diǎn)在制作邊界表時(shí)要額外注意。
上面腳本里得出的表是所有漢字的排序，其中有些和安卓代碼里HanziToPinyin.java的表有不同，所以需要更新HanziToPinyin.java的表。（從Java轉(zhuǎn)到JavaScript的大的坑和工作量：更正邊界表）
相信大家都看到了核心代碼：constCOLLATOR=newIntl.Collator(['zh-Hans-CN'])，Intl.Collator
（這里指定locale是中國zh-Hans-CN）正是能把漢字按拼音排序的關(guān)鍵，它是按locale-specific順序，排序字符串的InternationalizationAPI。
執(zhí)行腳本時(shí)請(qǐng)先npmifull-icu，這個(gè)依賴會(huì)自動(dòng)安裝缺失的中文支持并提示如何指定ICU數(shù)據(jù)文件來執(zhí)行腳本。
1.ICUICU即InternationalComponentsforUnicode，為應(yīng)用提供Unicode和國際化支持。
ICUisamature,widelyusedsetofC/C++andJavalibrariesprovidingUnicodeandGlobalizationsupportforsoftwareapplications.ICUiswidelyportableandgivesapplicationsthesameresultsonallplatformsandbetweenC/C++andJavasoftware.
并且ICU提供了本地化字符串比較服務(wù)（UnicodeCollationAlgorithm+本地特定的比較規(guī)則）：
Collation:Comparestringsaccordingtotheconventionsandstandardsofaparticularlanguage,regionorcountry.ICU'scollationisbasedontheUnicodeCollationAlgorithmpluslocale-specificcomparisonrulesfromtheCommonLocaleDataRepository,acomprehensivesourceforthistypeofdata.
在現(xiàn)代瀏覽器上，一般ICU內(nèi)置了對(duì)用戶本地語言的支持，我們直接使用即可。
但對(duì)node.js來說，通常情況下，ICU只包含了一個(gè)子集（通常是英語），所以我們需要自行添加對(duì)中文的支持。一般來說，可以通過npminstallfull-icu安裝full-icu
來安裝缺失的中文支持。(參見上面node--icu-data-dir=node_modules/full-icu）。
2.IntlAPI上一小節(jié)應(yīng)該基本講清楚了國際化/本地化相關(guān)的知識(shí)，這里再補(bǔ)充一下內(nèi)置API的使用。怎么查看用戶語言和Runtime是否支持這個(gè)語言？Intl.Collator.supportedLocalesOf(array|string)
返回包含支持（不用回退到默認(rèn)locale）的locales的數(shù)組，參數(shù)可以是數(shù)組或字符串，為想要測(cè)試的locales（即BCP47languagetag）。
構(gòu)造Collator對(duì)象和排序字符串
通過Intl.Collator.prototype.compare，我們可以按語言指定的順序來排序字符串。而中文中，這個(gè)排序恰好絕大多數(shù)都是按拼音的順序來的，'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è)邊界表是有問題的，需要更正。
我們可看到，大部分的漢字被轉(zhuǎn)成了qing，可見，qing這個(gè)拼音對(duì)應(yīng)的漢字有問題。
找到這個(gè)漢字，是'\u72c5'/'狅'，加上前后各一個(gè)字，['\u4eb2','\u72c5','\u828e']/["親","狅","芎"]
。
搜索，'\u72c5'/'狅'可以讀qing，但現(xiàn)在多讀kuang，這應(yīng)該就是錯(cuò)誤的原因了。
根據(jù)最初得到那張所有漢字的排序表，qing的第一個(gè)漢字是'\u9751'/'靑'。
改動(dòng)后，轉(zhuǎn)換失敗的只剩104了。
關(guān)于“JavaScript如何實(shí)現(xiàn)漢字轉(zhuǎn)拼音”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
