利用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 方法实现返回多个数据的代码
Apr 30 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
javascript RadioButtonList获取选中值
2009/04/09 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
pycharm的python_stubs问题
2020/04/08 Python
python中封包建立过程实例
2021/02/18 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
工作表现自我评价
2014/02/08 职场文书
产假请假条
2014/04/10 职场文书
新教师培训心得体会
2014/09/02 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis