利用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 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
jquery 插件学习(六)
Aug 06 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
js清空form表单中的内容示例
May 20 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
微信小程序实现左右列表联动
May 19 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
JS的数组的扩展实例代码
2008/07/09 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
详解vue axios二次封装
2018/07/22 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
前端性能优化建议
2020/09/17 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python3将变量输入的简单实例
2020/08/19 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
部门主管竞聘书
2015/09/15 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
小学运动会开幕词
2016/03/04 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android