利用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中去掉数组中的重复值的实现方法
Aug 03 Javascript
Js四则运算函数代码
Jul 21 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
vue写一个组件
2018/04/09 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
node后端服务保活的实现
2019/11/10 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
python实现共轭梯度法
2019/07/03 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python线程指南分享
2019/11/19 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
几道PHP的面试题
2012/05/19 面试题
工作批评与自我批评范文
2014/10/16 职场文书
任命书格式范文
2015/09/22 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python