js实现根据汉字的拼音按照a-z的方式进行排序
作者：南风晚来晚相识
需求的产生
今天在需求评审的过程中，遇见一个排序问题
地区的拼音按照a-z的顺序进行排序。
研究了一下，主要有下面三种做法。
1.使用 String.prototype.localeCompare()
2.new Intl.Collator()
3.使用第3方库 pinyin
下面我们来详细的介绍一下3种实现方法。
localeCompare 的介绍
localeCompare：用于比较两个字符串，并返回一个数字，表示哪个字符串应该排在前面。
语法：string.localeCompare(compareString, locales, options)
localeCompare 的第2个参数说明：
默认情况下，中文会按 Unicode 编码排序。
添加 'zh-Hans-CN' 后自动启用拼音顺序。
- 'zh-CN'：zh-CN 是地区导向的标签（中国大陆中文）
- 'zh-Hans-CN': zh-Hans-CN 是脚本+地区导向的标签（中国大陆简体中文）
需要精确控制时选zh-Hans-CN，追求通用兼容时选zh-CN
localeCompare 的第3个参数options说明：（可选）：一个对象，指定比较的行为。
- ignorePunctuation：true, 忽略标点符号。
- caseFirst：控制大小写排序顺序。'upper'：大写字母优先, 'lower'：小写字母优先。
- numeric：设为true时,按数字顺序比较字符串。如“苹果10”排在“苹果2”之后。
- sensitivity ：控制比较敏感度。有下面这些值
- 'base'：仅比较基础字符（忽略重音和大小写）。
- 'case'：考虑大小写差异。
localeCompare的排序原理
string.localeCompare(compareString, 'zh-CN')
在中文环境下会使用拼音（声母→韵母→声调）的字典顺序进行排序。
示例：'北方', 会排在 '北京' 的前面。
localeCompare实现排序
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);
我们发现使用localeCompare确实可以按照拼音进行排序啦。
有机智的小伙伴会说：如果浏览器不支持呢？
我查询过资料，确实会有这样的情况、
如:localeCompare函数在X5内核(android版的微信浏览器)的浏览器不兼容该函数，请注意使用。
我们可以先去检查一下，是否支持排序，如果不支持就不进行排序。
因为：不排序总比报错要强上不少。
避免依赖localeCompare的返回值
ECMAScript 规范仅要求localeCompare返回正/负/零。
但是不同浏览器可能返回 -1、-2、1、2 等
检查浏览器是否支持localeCompare排序
在使用 localeCompare 方法之前，先检测浏览器是否支持 localeCompare 方法。
如果支持，则返回 true，否则返回 false。
function isPinYinSupported() {
try {
// 创建测试字符串
const testArr = ['北京', '上海','成都']
testArr.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'))
// 如果未抛出错误，表示支持排序
return true
} catch (e) {
// 如果抛出错误，表示不支持
return false
}
}
Intl.Collator 的介绍
Intl.Collator 用于根据语言环境对字符串进行比较和排序，是国际化（i18n）API 的核心组件。
语法：new Intl.Collator(locales, options)
locales: 指定区域设置，如'zh-CN'表示简体中文
options是一个对象，有下面这些值
- -caseFirst：控制大小写排序顺序，可选upper（大写优先）, lower（小写优先）
- -numeric：设为true时,按数字顺序比较字符串。如“苹果10”排在“苹果2”之后。
- -ignorePunctuation：设为true时忽略标点符号，例 “你好,世界” 和 “你好世界” 会被视为相同
- -sensitivity:控制比较的敏感度。
--它的值有:case（考虑大小写）,base（仅比较基础字符,忽略重音和大小写）
排序时，忽略标点符号
// gnorePunctuation：设为true时忽略标点符号
const collatorIgnorePunct = new Intl.Collator('zh-CN', { ignorePunctuation: true });
console.log(collatorIgnorePunct.compare('你好,世界', '你好世界')); // 输出0，表示相等
排序时，照数字排序
// 按照数字排序
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;
}
// 区域支持检测
try {
new Intl.Collator('zh-CN');
return true;
} catch (e) {
// 捕获两种错误类，说明不支持：
return false;
}
}
console.log(supportIntlCollator())
Intl.Collator 和 localeCompare 的区别
当需重复比较大量字符串（如万级数组排序）时，Intl.Collator 相比localeCompare更高效。
Intl.Collator适合多次重复比较，localeCompare 适合单次比较。
因为 Intl.Collator 预先缓存语言规则。
[重要]频繁排序时，建议缓存collator实例以提高性能
sort排序会改变原数组
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);
console.log('原数组', nameArr);
到此这篇关于js实现根据汉字的拼音按照a-z的方式进行排序的文章就介绍到这了,更多相关js排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！