神级程序员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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
JS实现公告上线滚动效果
Jan 10 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
php实现的双向队列类实例
2014/09/24 PHP
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Python性能优化的20条建议
2014/10/25 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python+pyqt5编写md5生成器
2019/03/18 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
AUC计算方法与Python实现代码
2020/02/28 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
纠风工作实施方案
2014/03/15 职场文书
元旦标语大全
2014/10/09 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL