利用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 控制下拉菜单刷新的方法
Mar 03 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
javascript简单链式调用案例分析
May 10 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
jQuery实现计算器功能
Oct 19 jQuery
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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检测网页是否被百度收录的函数代码
2013/10/09 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php时间戳转换代码详解
2019/08/04 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
javascript 写类方式之十
2009/07/05 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
js实现简单点赞操作
2020/03/17 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
基于Django用户认证系统详解
2018/02/21 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python中for in的用法详解
2020/04/17 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
一月红领巾广播稿
2014/02/11 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
市场营销战略计划书
2014/05/06 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
初中生活随笔
2015/08/15 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL