腳本之家服務器常用軟件

快捷導航

js實現(xiàn)根據(jù)漢字的拼音按照a-z的方式進行排序

更新時間：2025年08月07日 09:45:35 作者：南風晚來晚相識

這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)根據(jù)漢字的拼音按照a-z的方式進行排序,文中的示例代碼講解詳細,需要的小伙伴可以了解下

需求的產(chǎn)生
localeCompare 的介紹
localeCompare的排序原理
localeCompare實現(xiàn)排序
避免依賴localeCompare的返回值
檢查瀏覽器是否支持localeCompare排序
Intl.Collator 的介紹
Intl.Collator 的排序 a-z進行排序
Intl.Collator 的排序 z-a進行排序
檢查瀏覽器是否支持 Intl.Collator
Intl.Collator 和 localeCompare 的區(qū)別
sort排序會改變原數(shù)組

需求的產(chǎn)生

今天在需求評審的過程中，遇見一個排序問題

地區(qū)的拼音按照a-z的順序進行排序。

研究了一下，主要有下面三種做法。

1.使用 String.prototype.localeCompare()

2.new Intl.Collator()

3.使用第3方庫 pinyin

下面我們來詳細的介紹一下3種實現(xiàn)方法。

localeCompare 的介紹

localeCompare：用于比較兩個字符串，并返回一個數(shù)字，表示哪個字符串應該排在前面。

語法：string.localeCompare(compareString, locales, options)

localeCompare 的第2個參數(shù)說明：

默認情況下，中文會按 Unicode 編碼排序。

添加 'zh-Hans-CN' 后自動啟用拼音順序。

'zh-CN'：zh-CN 是地區(qū)導向的標簽（中國大陸中文）
'zh-Hans-CN': zh-Hans-CN 是腳本+地區(qū)導向的標簽（中國大陸簡體中文）

需要精確控制時選zh-Hans-CN，追求通用兼容時選zh-CN

localeCompare 的第3個參數(shù)options說明：（可選）：一個對象，指定比較的行為。

ignorePunctuation：true, 忽略標點符號。
caseFirst：控制大小寫排序順序。'upper'：大寫字母優(yōu)先, 'lower'：小寫字母優(yōu)先。
numeric：設為true時,按數(shù)字順序比較字符串。如“蘋果10”排在“蘋果2”之后。
sensitivity ：控制比較敏感度。有下面這些值
'base'：僅比較基礎字符（忽略重音和大小寫）。
'case'：考慮大小寫差異。

localeCompare的排序原理

string.localeCompare(compareString, 'zh-CN')

在中文環(huán)境下會使用拼音（聲母→韻母→聲調(diào)）的字典順序進行排序。

示例：'北方', 會排在 '北京' 的前面。

localeCompare實現(xiàn)排序

const arr = [
  '南寧','阿壩州', '河池', '柳州', 
  '桂林','北安州', '賀州', '梧州','北院', '北京'
 ];
const newArr = arr.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));
console.log(newArr, arr);

const nameArr = [
  {"text": "北京", "value": "北京"},
  {"text": "阿壩州", "value": "阿壩州"},
  {"text": "桂林", "value": "桂林"},
  {"text": "南寧", "value": "南寧"},
];

const newArr = nameArr.sort((a, b) => a.text.localeCompare(b.text, 'zh-Hans-CN'));
console.log(newArr, nameArr);

我們發(fā)現(xiàn)使用localeCompare確實可以按照拼音進行排序啦。

有機智的小伙伴會說：如果瀏覽器不支持呢？

我查詢過資料，確實會有這樣的情況、

如:localeCompare函數(shù)在X5內(nèi)核(android版的微信瀏覽器)的瀏覽器不兼容該函數(shù)，請注意使用。

我們可以先去檢查一下，是否支持排序，如果不支持就不進行排序。

因為：不排序總比報錯要強上不少。

避免依賴localeCompare的返回值

ECMAScript 規(guī)范僅要求localeCompare返回正/負/零。

但是不同瀏覽器可能返回 -1、-2、1、2 等

檢查瀏覽器是否支持localeCompare排序

在使用 localeCompare 方法之前，先檢測瀏覽器是否支持 localeCompare 方法。

如果支持，則返回 true，否則返回 false。

function isPinYinSupported() {
  try {
    // 創(chuàng)建測試字符串
    const testArr = ['北京', '上海','成都']
    testArr.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'))
    // 如果未拋出錯誤，表示支持排序
    return true
  } catch (e) {
    // 如果拋出錯誤，表示不支持
    return false
  }
}

Intl.Collator 的介紹

Intl.Collator 用于根據(jù)語言環(huán)境對字符串進行比較和排序，是國際化（i18n）API 的核心組件。

語法：new Intl.Collator(locales, options)

locales: 指定區(qū)域設置，如'zh-CN'表示簡體中文

options是一個對象，有下面這些值

-caseFirst：控制大小寫排序順序，可選upper（大寫優(yōu)先）, lower（小寫優(yōu)先）
-numeric：設為true時,按數(shù)字順序比較字符串。如“蘋果10”排在“蘋果2”之后。
-ignorePunctuation：設為true時忽略標點符號，例 “你好,世界” 和 “你好世界” 會被視為相同
-sensitivity:控制比較的敏感度。

--它的值有:case（考慮大小寫）,base（僅比較基礎字符,忽略重音和大小寫）

排序時，忽略標點符號

// gnorePunctuation：設為true時忽略標點符號
const collatorIgnorePunct = new Intl.Collator('zh-CN', { ignorePunctuation: true });  
console.log(collatorIgnorePunct.compare('你好,世界', '你好世界')); // 輸出0，表示相等

排序時，照數(shù)字排序

// 按照數(shù)字排序  
const arr = ['蘋果10', '蘋果14','蘋果2']
// 緩存collator實例
const collator = new Intl.Collator('zh-CN', { numeric: true });
const sortedArr = arr.sort((a,b)=> collator.compare(a,b));
console.log(sortedArr); // ['蘋果2', '蘋果10', '蘋果14']

Intl.Collator 的排序 a-z進行排序

const arr = [
  '南寧','阿壩州', '河池', '柳州', '北方', '大連',
  '桂林','北安州', '賀州', '梧州','北院', '北京'
];
// 緩存collator實例，使用Intl.Collator進行拼音排序，
const collator = new Intl.Collator('zh-CN');
const sortedArr = arr.sort((a,b)=> collator.compare(a,b));
console.log(sortedArr);

const arr = [
  '南寧','阿壩州', '河池', '柳州', '北方', '大連',
  '桂林','北安州', '賀州', '梧州','北院', '北京'
];
// 緩存collator實例，使用Intl.Collator進行拼音排序
const collator = new Intl.Collator('zh-CN');
const sortedArr = arr.sort(collator.compare);
console.log(sortedArr);

Intl.Collator 的排序 z-a進行排序

const arr = [
  '南寧','阿壩州', '河池', '柳州', '北方', '大連',
  '桂林','北安州', '賀州', '梧州','北院', '北京'
];
// 緩存collator實例
const collator = new Intl.Collator('zh-CN');
// 在compare的時候使用compare(b, a)就是z-a進行排序了
const sortedArr = arr.sort((a, b) => collator.compare(b, a));
console.log(sortedArr);

檢查瀏覽器是否支持 Intl.Collator

function supportIntlCollator(){
  // 基礎兼容性檢查
  if (typeof Intl === 'undefined' || typeof Intl.Collator !== 'function') {
    return false;
  }
  // 區(qū)域支持檢測
  try {
    new Intl.Collator('zh-CN');
    return true;
  } catch (e) {
    // 捕獲兩種錯誤類，說明不支持：
    return false;
  }
}
console.log(supportIntlCollator())

Intl.Collator 和 localeCompare 的區(qū)別

當需重復比較大量字符串（如萬級數(shù)組排序）時，Intl.Collator 相比localeCompare更高效。

Intl.Collator適合多次重復比較，localeCompare 適合單次比較。

因為 Intl.Collator 預先緩存語言規(guī)則。

[重要]頻繁排序時，建議緩存collator實例以提高性能

sort排序會改變原數(shù)組

const nameArr = [
  {"text": "北京", "value": "北京"},
  {"text": "阿壩州", "value": "阿壩州"},
  {"text": "桂林", "value": "桂林"},
  {"text": "南寧", "value": "南寧"},
];

const newArr = nameArr.sort((a, b) => a.text.localeCompare(b.text, 'zh-Hans-CN'));
console.log('新數(shù)組', newArr);
console.log('原數(shù)組', nameArr);