神级程序员JavaScript300行代码搞定汉字转拼音


Posted in Javascript onMay 20, 2017

一.汉字转拼音的现状

首先应该说,汉字转拼音是个强需求,比如联系人按拼音字母排序/筛选;比如目的地(典型如机票购买)
按拼音首字母分类等等。但是这个需求的解决方案,但好像没听过什么巧妙的实现(特别是浏览器端),大概都需要一个庞大的字典。
具体到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.CollatorAPI:Intl.Collator内部实现了本土化相关的字符串排序。我们通过Intl.Collator.prototype.compare可以把所有汉字基本按照拼音来排序。
边界汉字表:记录了排序的边界点。该汉字表的每个汉字都是排序后相同拼音的汉字集合的首个汉字(Eachunihansisthefirstonewithinsamepinyinwhencollatoriszh_CN)。
说到这里,可能仍然有没说清楚的地方,所以直接上一段代码:

 神级程序员JavaScript300行代码搞定汉字转拼音

神级程序员JavaScript300行代码搞定汉字转拼音

有兴趣的同学可以执行node--icu-data-dir=node_modules/full-icu上面的脚本.js看看,然后看看是不是得到了基本按照拼音排序的汉字表。

这里有几点要注意:

我再次加粗了“基本”,因为我们得到的汉字列表并没有完全按照拼音来排序,中间偶尔有一些其它拼音的汉字插入,这点在制作边界表时要额外注意。
上面脚本里得出的表是所有汉字的排序,其中有些和安卓代码里HanziToPinyin.java的表有不同,所以需要更新HanziToPinyin.java的表。(从Java转到JavaScript的最大的坑和工作量:更正边界表)
相信大家都看到了核心代码:constCOLLATOR=newIntl.Collator(['zh-Hans-CN']),Intl.Collator
(这里指定locale是中国zh-Hans-CN)正是能把汉字按拼音排序的关键,它是按locale-specific顺序,排序字符串的InternationalizationAPI。
执行脚本时请先npmifull-icu,这个依赖会自动安装缺失的中文支持并提示如何指定ICU数据文件来执行脚本。
1.ICUICU即InternationalComponentsforUnicode,为应用提供Unicode和国际化支持。
ICUisamature,widelyusedsetofC/C++andJavalibrariesprovidingUnicodeandGlobalizationsupportforsoftwareapplications.ICUiswidelyportableandgivesapplicationsthesameresultsonallplatformsandbetweenC/C++andJavasoftware.
并且ICU提供了本地化字符串比较服务(UnicodeCollationAlgorithm+本地特定的比较规则):
Collation:Comparestringsaccordingtotheconventionsandstandardsofaparticularlanguage,regionorcountry.ICU'scollationisbasedontheUnicodeCollationAlgorithmpluslocale-specificcomparisonrulesfromtheCommonLocaleDataRepository,acomprehensivesourceforthistypeofdata.
在现代浏览器上,一般ICU内置了对用户本地语言的支持,我们直接使用即可。
但对node.js来说,通常情况下,ICU只包含了一个子集(通常是英语),所以我们需要自行添加对中文的支持。一般来说,可以通过npminstallfull-icu安装full-icu
来安装缺失的中文支持。(参见上面node--icu-data-dir=node_modules/full-icu)。
2.IntlAPI上一小节应该基本讲清楚了国际化/本地化相关的知识,这里再补充一下内置API的使用。怎么查看用户语言和Runtime是否支持这个语言?Intl.Collator.supportedLocalesOf(array|string)
返回包含支持(不用回退到默认locale)的locales的数组,参数可以是数组或字符串,为想要测试的locales(即BCP47languagetag)。

神级程序员JavaScript300行代码搞定汉字转拼音

构造Collator对象和排序字符串

神级程序员JavaScript300行代码搞定汉字转拼音

通过Intl.Collator.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',...
,这正是我们上面提到的汉字转拼音的关键。

四.边界表更正

神级程序员JavaScript300行代码搞定汉字转拼音

 显然,这个边界表是有问题的,需要更正。
我们可看到,大部分的汉字被转成了qing,可见,qing这个拼音对应的汉字有问题。
找到这个汉字,是'\u72c5'/'??,加上前后各一个字,['\u4eb2','\u72c5','\u828e']/["亲","??,"芎"]

搜索,'\u72c5'/'??可以读qing,但现在多读kuang,这应该就是错误的原因了。
根据最初得到那张所有汉字的排序表,qing的第一个汉字是'\u9751'/'?'。
改动后,转换失败的只剩104了。

 神级程序员JavaScript300行代码搞定汉字转拼音

Javascript 相关文章推荐
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 #Javascript
微信小程序利用co处理异步流程的方法教程
May 20 #Javascript
关于jQuery库冲突的完美解决办法
May 20 #jQuery
layui文件上传实现代码
May 20 #Javascript
为你的微信小程序体积瘦身详解
May 20 #Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
使用node.js搭建服务器
May 20 #Javascript
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
php 文件缓存函数
2011/10/08 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
PHP7 windows支持
2021/03/09 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python中几种属性访问的区别与用法详解
2018/10/10 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
python字符串格式化方式解析
2019/10/19 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
孝老爱亲模范事迹
2014/01/24 职场文书
函授药学自我鉴定
2014/02/07 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
酒店员工培训方案
2014/06/02 职场文书
禁毒宣传标语
2014/06/19 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2015年高校就业工作总结
2015/05/04 职场文书