利用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 相关文章推荐
js动画(animate)简单引擎代码示例
Dec 04 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
采用call方式实现js继承
May 20 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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
VFP与其他应用程序的集成
2006/10/09 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP实现微信退款功能
2018/10/02 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
html下载本地
2006/06/19 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
我读书我快乐演讲稿
2014/05/07 职场文书
项目投资建议书
2014/05/16 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
班组拓展活动方案
2014/08/14 职场文书
2015政治思想表现评语
2015/03/25 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js