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

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

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

前言

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

對于中文列表按照名稱排序就是按照拼音排序，不能簡單通過字符串比較—— ‘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 提供本地化文字排序，比如對中文按照拼音排序，不需要程序顯示比較字符串拼音。

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

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

總結(jié)

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

您可能感興趣的文章:

• JavaScript實(shí)現(xiàn)拼音排序的方法
• js 淘寶首頁的拼音排序效果
• Extjs Gird 支持中文拼音排序?qū)崿F(xiàn)代碼
• javascript對中文按照拼音排序代碼
• javaScript對文字按照拼音排序?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)文章

• 

  JavaScript刪除數(shù)組中指定元素5種方法例子

  這篇文章主要給大家介紹了關(guān)于JavaScript刪除數(shù)組中指定元素5種方法,在最近的項(xiàng)目中,有用到j(luò)s對數(shù)組的操作,所以這里總結(jié)一下,需要的朋友可以參考下

  2023-07-07
• 

  基于javascript實(shí)現(xiàn)簡單計(jì)算器功能

  這篇文章主要介紹了基于javascript實(shí)現(xiàn)簡單計(jì)算器功能的相關(guān)資料,需要的朋友可以參考下

  2016-01-01
• 

  詳解JavaScript中操作符和表達(dá)式

  本篇文章給大家分享了關(guān)于JavaScript中操作符和表達(dá)式的相關(guān)知識點(diǎn)內(nèi)容，有興趣的朋友們參考下吧。

  2018-09-09
• 

  Javascript結(jié)合css實(shí)現(xiàn)網(wǎng)頁換膚功能

  現(xiàn)在網(wǎng)站換皮膚是比較常見的功能，大多數(shù)論壇都有的，要想實(shí)現(xiàn)這樣效果可以看如下代碼.

  2009-11-11
• 

  JS操作Cookies的小例子

  這篇文章介紹了JS操作Cookies的小例子，有需要的朋友可以參考一下

  2013-10-10
• 

  微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼

  這篇文章主要介紹了微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼,代碼塊是從微信開發(fā)文檔中心復(fù)制的代碼塊，在此基礎(chǔ)上修改官方swiper樣式，需要的朋友可以參考下

  2018-07-07
• 

  詳解JavaScript表單驗(yàn)證（E-mail 驗(yàn)證）

  這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證，重點(diǎn)介紹了E-mail驗(yàn)證，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2016-03-03
• 

  mpvue微信小程序多列選擇器用法之省份城市選擇的實(shí)現(xiàn)

  這篇文章主要給大家介紹了關(guān)于mpvue微信小程序多列選擇器用法之省份城市選擇實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

  2019-03-03
• 

  JavaScript中變量提升與函數(shù)提升經(jīng)典實(shí)例分析

  這篇文章主要介紹了JavaScript中變量提升與函數(shù)提升,結(jié)合實(shí)例形式分析了JavaScript中的變量提升與函數(shù)提升相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下

  2018-07-07
• 

  javascript 節(jié)點(diǎn)遍歷函數(shù)

  火狐官網(wǎng)上找到的一組函數(shù)，相當(dāng)于treeWalker，有了它可以方便地在IE實(shí)現(xiàn)Traversal API 2的所有功能

  2010-03-03

最新評論