利用JavaScript對中文（漢字）進行排序?qū)嵗斀?/h1>
更新時間：2017年06月18日 10:38:11 作者：袖之歡
排序是我們在日常開發(fā)中經(jīng)常遇到的一個功能，下面這篇文章主要給大家介紹了利用JavaScript對中文（漢字）進行排序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來看看吧。
前言
在網(wǎng)頁上展示列表時經(jīng)常需要對列表進行排序：按照修改/訪問時間排序、按照地區(qū)、按照名稱排序。
對于中文列表按照名稱排序就是按照拼音排序，不能簡單通過字符串比較—— ‘a(chǎn)' > ‘b'——這種方式來實現(xiàn)。
比如比較 ‘北京' vs ‘上海'，實際是比較 ‘běijīng' vs ‘shànghǎi'；比較 ‘北京' vs ‘背景'，實際是比較 ‘běijīng' vs ‘bèijǐng'。
一般需要獲取到字符串的拼音，再比較各自的拼音。
實現(xiàn)方法
JavaScript 提供本地化文字排序，比如對中文按照拼音排序，不需要程序顯示比較字符串拼音。
String.prototype.localeCompare 在不考慮多音字的前提下，基本可以完美實現(xiàn)按照拼音排序。
在沒有出現(xiàn)意外的情況下，各個支持 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í)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
-
這篇文章主要為大家詳細(xì)介紹了JS畫布動態(tài)實現(xiàn)黑客帝國背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2020-11-11
-
關(guān)于innerHTML后丟失動態(tài)綁定的EVENT問題解決方法
用innerHTML取出一段內(nèi)容后再innerHTML回去,那么原來動態(tài)綁定的事件就會丟失，下面與大家分享下解決方法，感興趣的朋友可以參考下哈 2013-05-05
-
淺談layui使用模板引擎動態(tài)渲染元素要注意的問題
今天小編就為大家分享一篇淺談layui使用模板引擎動態(tài)渲染元素要注意的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧 2019-09-09
-
這篇文章主要介紹了js仿支付寶填寫支付密碼效果實現(xiàn)多方框輸入密碼的功能，感興趣的小伙伴們可以參考一下 2016-03-03
-
javascript發(fā)表評論或者留言時的展開效果... 2007-07-07
-
生成map對象的方法或許會有很多，在本文將為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯過 2014-01-01
-
js超時調(diào)用setTimeout和間歇調(diào)用setInterval實例分析
這篇文章主要介紹了js超時調(diào)用setTimeout和間歇調(diào)用setInterval,以實例形式對比分析了setTimeout與setInterval的具體使用技巧,非常具有實用價值,需要的朋友可以參考下 2015-01-01
-
這篇文章主要為大家分享超詳細(xì)的JS彈出窗口代碼大全，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2016-09-09
-
js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例
在本篇文章里小編給大家分享了關(guān)于js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例和代碼，需要的朋友們學(xué)習(xí)下。 2019-01-01
-
javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對你對你學(xué)習(xí)function的定義有所幫助 2013-05-05
最新評論
前言
在網(wǎng)頁上展示列表時經(jīng)常需要對列表進行排序：按照修改/訪問時間排序、按照地區(qū)、按照名稱排序。
對于中文列表按照名稱排序就是按照拼音排序，不能簡單通過字符串比較—— ‘a(chǎn)' > ‘b'——這種方式來實現(xiàn)。
比如比較 ‘北京' vs ‘上海'，實際是比較 ‘běijīng' vs ‘shànghǎi'；比較 ‘北京' vs ‘背景'，實際是比較 ‘běijīng' vs ‘bèijǐng'。
一般需要獲取到字符串的拼音，再比較各自的拼音。
實現(xiàn)方法
JavaScript 提供本地化文字排序，比如對中文按照拼音排序，不需要程序顯示比較字符串拼音。
String.prototype.localeCompare 在不考慮多音字的前提下，基本可以完美實現(xiàn)按照拼音排序。
在沒有出現(xiàn)意外的情況下，各個支持 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í)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
- 這篇文章主要為大家詳細(xì)介紹了JS畫布動態(tài)實現(xiàn)黑客帝國背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
-
關(guān)于innerHTML后丟失動態(tài)綁定的EVENT問題解決方法
用innerHTML取出一段內(nèi)容后再innerHTML回去,那么原來動態(tài)綁定的事件就會丟失，下面與大家分享下解決方法，感興趣的朋友可以參考下哈2013-05-05 -
淺談layui使用模板引擎動態(tài)渲染元素要注意的問題
今天小編就為大家分享一篇淺談layui使用模板引擎動態(tài)渲染元素要注意的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09 - 這篇文章主要介紹了js仿支付寶填寫支付密碼效果實現(xiàn)多方框輸入密碼的功能，感興趣的小伙伴們可以參考一下2016-03-03
- javascript發(fā)表評論或者留言時的展開效果...2007-07-07
- 生成map對象的方法或許會有很多，在本文將為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯過2014-01-01
-
js超時調(diào)用setTimeout和間歇調(diào)用setInterval實例分析
這篇文章主要介紹了js超時調(diào)用setTimeout和間歇調(diào)用setInterval,以實例形式對比分析了setTimeout與setInterval的具體使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01 - 這篇文章主要為大家分享超詳細(xì)的JS彈出窗口代碼大全，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
-
js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例
在本篇文章里小編給大家分享了關(guān)于js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例和代碼，需要的朋友們學(xué)習(xí)下。2019-01-01 -
javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對你對你學(xué)習(xí)function的定義有所幫助2013-05-05