JavaScript 提供本地化文字排序,比如对中文按照拼音排序,不需要程序显示比较字符串拼音。

String.prototype.localeCompare 在不考虑多音字的前提下,基本可以完美实现按照拼音排序。

在没有出现意外的情况下,各个支持 localeCompare 的浏览器都很正常。最近将 Chrome 更新到 58.0.3029.110,突然发现中文排序不正常。

确认之后是 localeCompare 需要明确指定 locales 参数.

代码1,拼音排序:

var array = ['武汉', '北京', '上海', '天津']; 
var resultArray = array.sort( 
    function compareFunction(param1, param2) { 
        return param1.localeCompare(param2,"zh"); 
    } 
); 
console.log(resultArray);

火狐浏览器 resultArray 结果为:[ '北京' , '上海' , '天津' ,'武汉' ] ;

代码2,拼音排序并按字母分类:

 1 function pySegSort(arr,empty) { 
 2     if(!String.prototype.localeCompare) 
 3         return null; 
 4       
 5     var letters = "*abcdefghjklmnopqrstwxyz".split(''); 
 6     var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split(''); 
 7       
 8     var segs = []; 
 9     var curr; 
10     $.each(letters, function(i){ 
11         curr = {letter: this, data:[]}; 
12         $.each(arr, function() { 
13             if((!zh[i-1] || zh[i-1].localeCompare(this,"zh") <= 0) && this.localeCompare(zh[i],"zh") == -1) { 
14                 curr.data.push(this); 
15             } 
16         }); 
17         if(empty || curr.data.length) { 
18             segs.push(curr); 
19             curr.data.sort(function(a,b){ 
20                 return a.localeCompare(b,"zh"); 
21             }); 
22         } 
23     }); 
24     return segs; 
25 }
JSON.stringify(pySegSort([ "我" , "不" , "懂" , "爱" , "啊" , "按" , "已" , "呀" , "选" , "县" ]))
//结果
"[
  {" letter ":" a "," data ":[" "," "," "]} ,
  {" letter ":" b "," data ":[" "]} ,
  {" letter ":" d "," data ":[" "]} ,
  {" letter ":" w "," data ":[" "]},
  {" letter ":" x "," data ":[" "," "]},
  {" letter ":" y "," data ":[" "," "]}
]"
 
 
扩展:http://blog.csdn.net/testcs_dn/article/details/25116655         ------JS获取中文拼音首字母,并通过拼音首字母快速查找页面内的中文内容
           http://www.jb51.net/article/100864.htm      ----------JS实现超简单的汉字转拼音功能示例
           https://github.com/sxei/pinyinjs                  -----------一个实现汉字与拼音互转的小巧web工具库


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Web Workers文档知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。