利用JavaScript对中文(汉字)进行排序实例详解


Posted in Javascript onJune 18, 2017

前言

在网页上展示列表时经常需要对列表进行排序:按照修改/访问时间排序、按照地区、按照名称排序。

对于中文列表按照名称排序就是按照拼音排序,不能简单通过字符串比较—— ‘a' > ‘b'——这种方式来实现。

比如比较 ‘北京' vs ‘上海',实际是比较 ‘běijīng' vs ‘shànghǎi';比较 ‘北京' vs ‘背景',实际是比较 ‘běijīng' vs ‘bèijǐng'。

一般需要获取到字符串的拼音,再比较各自的拼音。

实现方法

JavaScript 提供本地化文字排序,比如对中文按照拼音排序,不需要程序显示比较字符串拼音。

String.prototype.localeCompare 在不考虑多音字的前提下,基本可以完美实现按照拼音排序。

在没有出现意外的情况下,各个支持 localeCompare 的浏览器都很正常。最近将 Chrome 更新到 58.0.3029.110,突然发现中文排序不正常。

// 正常应该返回 1, 拼音 jia 在前, kai 在后
'开'.localeCompare('驾');
// 得到
-1;
 
// Chrome 58.0.3029.110 下返回 -1, 其他浏览器正常
 
// 确认之后是 localeCompare 需要明确指定 locales 参数
'开'.localeCompare('驾', 'zh');
// 得到
1

利用JavaScript对中文(汉字)进行排序实例详解

在 Chrome 下传递 locales 参数才能获得正常预期结果

利用JavaScript对中文(汉字)进行排序实例详解

Edge 浏览器支持 localeCompare

利用JavaScript对中文(汉字)进行排序实例详解

Firefox 浏览器支持 localeCompare

利用JavaScript对中文(汉字)进行排序实例详解

IE 11 浏览器支持 localeCompare

其他浏览器对 localeCompare 支持也很友好,目前也不需要明确传递 locales,浏览器支持参考 developer.mozilla.org

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 #Javascript
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
vue router路由嵌套不显示问题的解决方法
Jun 17 #Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 #Javascript
js轮播图无缝滚动效果
Jun 17 #Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
python 实现两个线程交替执行
2020/05/02 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
应届大学生自荐信格式
2013/09/21 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
Android自定义双向滑动控件
2022/04/19 Java/Android