利用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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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
桌面中心(一)创建数据库
2006/10/09 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php使用codebase生成随机数
2014/03/25 PHP
php实现文件下载实例分享
2014/06/02 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
chrome原生方法之数组
2011/11/30 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python下载微信公众号相关文章
2019/02/26 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
电子商务应届生求职信
2013/11/16 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
MySQL数据库完全卸载的方法
2022/03/03 MySQL