利用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实现切换页面布局使用介绍
Oct 09 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
网络传输协议(http协议)
Nov 18 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 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创建动态图像
2006/10/09 PHP
mysql时区问题
2008/03/26 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
JS获取地址栏参数的小例子
2013/08/23 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
Python sys.path详细介绍
2013/10/17 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python实现dijkstra最短路由算法
2019/01/17 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
python打开文件的方式有哪些
2020/06/29 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
《灰雀》教学反思
2016/02/19 职场文书