利用JavaScript對(duì)中文（漢字）進(jìn)行排序?qū)嵗斀?/h1>

 更新時(shí)間：2017年06月18日 10:38:11   作者：袖之歡  

排序是我們?cè)谌粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，下面這篇文章主要給大家介紹了利用JavaScript對(duì)中文（漢字）進(jìn)行排序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來看看吧。

前言

在網(wǎng)頁上展示列表時(shí)經(jīng)常需要對(duì)列表進(jìn)行排序：按照修改/訪問時(shí)間排序、按照地區(qū)、按照名稱排序。

對(duì)于中文列表按照名稱排序就是按照拼音排序，不能簡(jiǎn)單通過字符串比較—— ‘a(chǎn)' > ‘b'——這種方式來實(shí)現(xiàn)。

比如比較 ‘北京' vs ‘上海'，實(shí)際是比較 ‘běijīng' vs ‘shànghǎi'；比較 ‘北京' vs ‘背景'，實(shí)際是比較 ‘běijīng' vs ‘bèijǐng'。

一般需要獲取到字符串的拼音，再比較各自的拼音。

實(shí)現(xiàn)方法

JavaScript 提供本地化文字排序，比如對(duì)中文按照拼音排序，不需要程序顯示比較字符串拼音。

String.prototype.localeCompare 在不考慮多音字的前提下，基本可以完美實(shí)現(xiàn)按照拼音排序。

在沒有出現(xiàn)意外的情況下，各個(gè)支持 localeCompare 的瀏覽器都很正常。最近將 Chrome 更新到 58.0.3029.110，突然發(fā)現(xiàn)中文排序不正常。

// 正常應(yīng)該返回 1, 拼音 jia 在前, kai 在后
'開'.localeCompare('駕');
// 得到
-1;
 
// Chrome 58.0.3029.110 下返回 -1, 其他瀏覽器正常
 
// 確認(rèn)之后是 localeCompare 需要明確指定 locales 參數(shù)
'開'.localeCompare('駕', 'zh');
// 得到
1

在 Chrome 下傳遞 locales 參數(shù)才能獲得正常預(yù)期結(jié)果

Edge 瀏覽器支持 localeCompare

Firefox 瀏覽器支持 localeCompare

IE 11 瀏覽器支持 localeCompare

其他瀏覽器對(duì) localeCompare 支持也很友好，目前也不需要明確傳遞 locales，瀏覽器支持參考 developer.mozilla.org

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

• JavaScript實(shí)現(xiàn)拼音排序的方法
• js 淘寶首頁的拼音排序效果
• Extjs Gird 支持中文拼音排序?qū)崿F(xiàn)代碼
• javascript對(duì)中文按照拼音排序代碼
• javaScript對(duì)文字按照拼音排序?qū)崿F(xiàn)代碼
• js實(shí)現(xiàn)漢字排序的方法
• JavaScript 給漢字排序?qū)嵗a
• js漢字排序問題 支持中英文混排，兼容各瀏覽器，包括CHROME
• js漢字轉(zhuǎn)拼音實(shí)現(xiàn)代碼
• 用正則表達(dá)式判斷字符串是漢字還是拼音的js函數(shù)代碼
• js仿淘寶的拼音檢索特效代碼
• JS實(shí)現(xiàn)中文漢字按拼音排序的方法

• javascript
• 漢字排序
• 中文排序

相關(guān)文章

• 

  JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果

  這篇文章主要為大家詳細(xì)介紹了JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2020-11-11
• 

  關(guān)于innerHTML后丟失動(dòng)態(tài)綁定的EVENT問題解決方法

  用innerHTML取出一段內(nèi)容后再innerHTML回去,那么原來動(dòng)態(tài)綁定的事件就會(huì)丟失，下面與大家分享下解決方法，感興趣的朋友可以參考下哈

  2013-05-05
• 

  淺談layui使用模板引擎動(dòng)態(tài)渲染元素要注意的問題

  今天小編就為大家分享一篇淺談layui使用模板引擎動(dòng)態(tài)渲染元素要注意的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

  2019-09-09
• 

  js仿支付寶填寫支付密碼效果實(shí)現(xiàn)多方框輸入密碼

  這篇文章主要介紹了js仿支付寶填寫支付密碼效果實(shí)現(xiàn)多方框輸入密碼的功能，感興趣的小伙伴們可以參考一下

  2016-03-03
• 

  javascript發(fā)表評(píng)論或者留言時(shí)的展開效果

  javascript發(fā)表評(píng)論或者留言時(shí)的展開效果...

  2007-07-07
• 

  js中生成map對(duì)象的方法

  生成map對(duì)象的方法或許會(huì)有很多，在本文將為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過

  2014-01-01
• 

  js超時(shí)調(diào)用setTimeout和間歇調(diào)用setInterval實(shí)例分析

  這篇文章主要介紹了js超時(shí)調(diào)用setTimeout和間歇調(diào)用setInterval,以實(shí)例形式對(duì)比分析了setTimeout與setInterval的具體使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

  2015-01-01
• 

  超詳細(xì)的JS彈出窗口代碼大全

  這篇文章主要為大家分享超詳細(xì)的JS彈出窗口代碼大全，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2016-09-09
• 

  js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實(shí)例

  在本篇文章里小編給大家分享了關(guān)于js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實(shí)例和代碼，需要的朋友們學(xué)習(xí)下。

  2019-01-01
• 

  javascript兩種function的定義介紹及區(qū)別說明

  javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對(duì)你對(duì)你學(xué)習(xí)function的定義有所幫助

  2013-05-05

最新評(píng)論