利用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将相对路径转绝对路径示例
Mar 14 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
vue多次循环操作示例
Feb 08 Javascript
原生JavaScript实现购物车
Jan 10 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php错误级别的设置方法
2013/06/17 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
python实现的一个火车票转让信息采集器
2014/07/09 Python
Python中replace方法实例分析
2014/08/20 Python
理解Python中的With语句
2015/02/02 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python实现一组典型数据格式转换
2018/12/15 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
个人银行贷款担保书
2014/04/01 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python