利用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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
通过实例解析python描述符原理作用
2020/01/22 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
学校交通安全责任书
2014/08/25 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
海洋天堂观后感
2015/06/05 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL