Web前端之汉字排序、sort与localeCompare的介绍、编码顺序与字典顺序的区别

MENU

使用字典顺序对汉字进行排序(不支持多音字)

不使用拼音库，利用JavaScript的localeCompare方法直接按汉字的字典序排序。localeCompare可以在比较字符串时指定语言及排序规则，它对中文字符排序时，会默认按拼音顺序排列。

const arr =['南宁','河池','柳州','桂林','贺州','梧州'];const list =[{
        id:1,
        title:'南宁'},{
        id:2,
        title:'河池'},{
        id:3,
        title:'柳州'},{
        id:4,
        title:'桂林'},{
        id:5,
        title:'贺州'},{
        id:6,
        title:'梧州'}];let newArr = arr.sort((a, b)=> a.localeCompare(b,'zh-Hans-CN'));let newList = list.sort((a, b)=> a.title.localeCompare(b.title,'zh-Hans-CN'));

console.log(newArr);// ["桂林", "河池", "贺州", "柳州", "南宁", "梧州"]
console.log(newList);// [//     {//         "id": 4,//         "title": "桂林"//     },//     {//         "id": 2,//         "title": "河池"//     },//     {//         "id": 5,//         "title": "贺州"//     },//     {//         "id": 3,//         "title": "柳州"//     },//     {//         "id": 1,//         "title": "南宁"//     },//     {//         "id": 6,//         "title": "梧州"//     }// ]

在示例中，使用localeCompare的第二个参数’zh-Hans-CN’，指定简体中文和中国的排序规则。localeCompare会根据拼音顺序排序汉字，而不需要任何额外的拼音库。
sort方法接受一个比较函数，localeCompare用于比较两个字符串的字典顺序。
'zh-Hans-CN’指定简体中文的语言和地区代码，以确保对汉字进行拼音顺序排序。
这种方法在大多数现代浏览器和Node.js环境中都支持。

编码顺序和字典顺序的区别

编码顺序和字典顺序是两种不同的排序方式，特别是在处理中文字符时，这两种顺序差异显著。

---

1、编码顺序
编码顺序基于字符在计算机字符集(如Unicode)中的编码值来排序。在编码顺序中，字符的位置和大小顺序完全由它的编码值决定，而不考虑字符的语言或意义。
原理
计算机将每个字符映射为一个二进制数值，称为编码。对于中文字符来说，Unicode会为每个汉字分配一个独特的编码。因此，当按编码顺序排列汉字时，实际上是按照它们的编码值大小从小到大排列。
**特点
编码顺序是纯粹的二进制排序，不涉及语言的语义。
对于同一字符集(如Unicode)中的字符，这种排序方式非常快，但对中文用户来说没有任何实际的语义或拼音顺序可言。
假设有汉字列表

["张", "王", "李", "赵"]

，编码顺序可能会排列成

["李", "王", "张", "赵"]

，因为它们在Unicode表中的顺序就是这样，但这并不符合字典或拼音顺序。**
适用场景
这种排序方式在需要统一编码的场景中有用，例如存储或快速查找数据。但它不适合用户展示，因为不符合直观的语言排序。

---

2、字典顺序
字典顺序是基于自然语言的排序方式。在中文中，字典顺序可以基于拼音顺序或部首笔画顺序，这两种方法可以在实际使用中帮助人们更容易地找到和整理文字。

---

2.1、拼音顺序
这是现代电子设备和软件最常用的字典顺序，基于汉字的拼音字母排序。
原理
每个汉字可以被转换成拼音，按拼音的字母顺序排列汉字列表。拼音字母较小的字在前，较大的字在后。
**例子
对于同一列表

["张", "王", "李", "赵"]

，按拼音排序会得到

["李", "王", "张", "赵"]

，符合中文字典的拼音查找顺序。**

---

2.2、部首笔画顺序
这是传统字典中常用的另一种顺序，基于汉字的部首和笔画数。
原理
首先按部首排列，然后按剩余笔画数从少到多排序。需要根据每个汉字的部首和笔画数进行对比。
**例子
如果用部首笔画法排序同样的列表

["张", "王", "李", "赵"]

，结果可能会是

["李", "王", "赵", "张"]

，取决于部首的顺序以及剩余笔画数。**

---

3、编码顺序与字典顺序的对比
特点编码顺序字典顺序排序依据字符编码的数值自然语言的拼音或部首笔画是否符合直觉否，不考虑语言语义是，更符合人类阅读和查找习惯计算速度快，按二进制数值排序较慢，需要语言规则和转换适用场景原始数据处理、索引等用户展示、文字查找等

---

4、JavaScript示例
在JavaScript中，可以利用localeCompare来实现字典顺序的拼音排序，而编码顺序可以直接使用sort方法按Unicode编码排序。

---

编码顺序

const words =["张","王","李","赵"];

words.sort();
console.log(words);// ["李", "王", "张", "赵"]

---

字典顺序(拼音)

const words =["张","王","李","赵"];

words.sort((a, b)=> a.localeCompare(b,'zh-Hans-CN'));
console.log(words);// ["李", "王", "张", "赵"]

---

localeCompare指定简体中文的排序规则，可以按照拼音顺序对汉字排序。

---

5、总结
编码顺序基于字符的二进制编码值，快速但不符合直观语言规则。
字典顺序基于拼音或部首笔画，符合人类查阅习惯，但需要更多计算和语言支持。
在实际应用中，字典顺序更符合用户的需求，编码顺序更适合数据的内部存储。

sort与localeCompare的介绍

sort和localeCompare是JavaScript中两个与排序相关的功能，但它们的工作方式和适用场景有所不同。

---

1、sort方法
Array.prototype.sort() 是 JavaScript 用来对数组进行排序的方法，它可以直接对数组中的元素按编码顺序进行排序，也可以通过传递比较函数自定义排序规则。
工作原理
默认排序：如果sort不传入任何参数，则按编码顺序(即字符串的Unicode编码)进行排序，这对数字或字符串的基本排序是有效的，但对中文和其他语言符号排序可能会显得混乱。
自定义排序：可以向sort传递一个比较函数自定义排序规则。比较函数应返回一个负数、零或正数，分别表示较小、相等或较大，用于确定元素的排序。
示例

// 编码顺序(默认排序)const words =["张","王","李","赵"];

words.sort();
console.log(words);// ["李", "王", "张", "赵"]// 自定义排序(如按长度排序)const numbers =[1,5,2,10];

numbers.sort((a, b)=> a - b);
console.log(numbers);// 1, 2, 5, 10]

特点
默认编码顺序：sort默认使用编码顺序排序，可能不符合特定语言的字典排序规则。
需要提供比较函数：为了实现更复杂的排序逻辑，通常会结合localeCompare等方法来提供比较函数。

---

**2、localeCompare方法

String.prototype.localeCompare()

是JavaScript中用于比较两个字符串的方法，支持指定语言及排序规则。localeCompare会根据区域语言的特定排序规则来确定字符串的顺序，因此适合处理自然语言中的排序问题。
工作原理
localeCompare方法会比较两个字符串，并返回负数、0或正数。
负数：表示当前字符串在排序中应排在参数字符串之前。
0：表示两个字符串在排序中位置相同。
正数：表示当前字符串在排序中应排在参数字符串之后。
可以为localeCompare指定语言和地区(如zh-Hans-CN)，从而按照拼音顺序对中文字符进行排序。
示例**

// 使用localeCompare比较字符串的字典顺序const words =["张","王","李","赵"];

words.sort((a, b)=> a.localeCompare(b,'zh-Hans-CN'));
console.log(words);// ["李", "王", "张", "赵"]

特点
按语言排序规则：localeCompare能够根据指定的语言进行排序，适用于需要特定语言字典顺序的场景。
自定义灵活性：通过在localeCompare中指定不同的区域代码，可以对多语言内容进行排序。

---

3、sort和localeCompare的组合使用
在实际应用中，sort常常和localeCompare结合使用，以实现多语言环境中的自然排序。sort负责排序的整体流程，而localeCompare提供特定的语言比较规则。

const words =["苹果","香蕉","橙子","菠萝","西瓜"];

words.sort((a, b)=> a.localeCompare(b,'zh-Hans-CN'));
console.log(words);// ["菠萝", "橙子", "苹果", "西瓜", "香蕉"]

---

4、总结对比
特性sortlocaleCompare主要用途对数组进行排序比较两个字符串的顺序默认行为按编码顺序(Unicode)排序按指定语言的字典序进行比较适合语言对多语言支持较弱支持多语言排序是否传入参数可选传入比较函数可指定语言和比较选项常见组合与localeCompare结合使用以实现自然语言排序用作sort的比较函数

---

5、使用场景建议
如果只是简单的编码排序，可以直接使用sort()。
如果需要按语言规则排序(如拼音)，使用sort((a, b) => a.localeCompare(b, ‘语言’))。