利用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 ui dialog里调用datepicker的问题
Aug 06 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
微信小程序实现选项卡滑动切换
Oct 22 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
php使用百度ping服务代码实例
2014/06/19 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
js html实现计算器功能
2018/11/13 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
PHP面试题附答案
2015/11/28 面试题
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
国贸专业个人求职信范文
2014/01/08 职场文书
科级干部考察材料
2014/02/15 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
中秋节祝酒词
2015/08/12 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书