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

MENU

  • 使用字典顺序对汉字进行排序(不支持多音字)
  • 编码顺序和字典顺序的区别
  • sort与localeCompare的介绍

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

不使用拼音库,利用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, ‘语言’))。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/15729.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

柯桥生活英语口语学习“面坨了”英语怎么表达?

“面坨了”英语怎么表达? 要想搞清楚这个表达,首先,我们要搞明白“坨”是啥意思? 所谓“坨”就是指,面条在汤里泡太久,从而变涨,黏糊凝固在一起的状态。 有一个词汇,很适合用来表达这…

鸿蒙NEXT应用示例:切换图片动画

【引言】 在鸿蒙NEXT应用开发中,实现图片切换动画是一项常见的需求。本文将介绍如何使用鸿蒙应用框架中的组件和动画功能,实现不同类型的图片切换动画效果。 【环境准备】 电脑系统:windows 10 开发工具:DevEco Studio NEXT B…

UAC2.0 speaker——speaker 数据传输

文章目录 麦克风数据传输准备音频数据抓包原始数据频谱分析(FFT)应用麦克风数据传输 上一节中实现了 USB 麦克风设备 本节主要介绍 MCU 麦克风的数据如何传输给上位机。 准备音频数据 MCU 端发送 48KHZ, 16bit 单声道的正弦波数据,正弦波数据的生成参考 音频——C语言生…

【多语言】每种语言打印helloworld,编译为exe会占多大空间

文章目录 背景c语言 53KBc 53KBgo 1.8Mdart 4.6Mpython未测试nodejs未测试rust未测试java未测试cmd || bash || powershell 未测试other 背景 各个版本的helloworld,纯属闲的, 环境如下: - win10 - mingw: gcc8.1.0 - go1.21 - dart3.5.4c语言 53KB gcc main.c -…

Android12的ANR解析

0. 参考: ANR分析 深入理解 Android ANR 触发原理以及信息收集过程 1.ANR的触发分类: ANR分为4类: InputDispatchTimeout:输入事件分发超时5s,包括按键和触摸事件。BroadcastTimeout:比如前台广播在10s内未执行完成&#xff0…

2022-2023全国高校计算机能力挑战赛区域赛python组编程题

mi目录 2022 1. 2. 1. 使用 format() 方法 2. 使用 f-string(Python 3.6 及以上) 2023 1. 2. 3. 4 闽农大宝玲楼 2022 1. 1.某动物研究员给动物园的动物们定了一个园区幸福值,其中园区幸福值的计算为一个园区内“所有动物的活动时…

函数的栈帧

前言: 1.请使用vs2013调试,我使用vs2019被恶心到了,封装严重,不利于观察。 2.函数栈帧:函数就是程序,程序就需要空间来运行,所以我们要为他分配空间,分配的空间用ebp esp维护&…

机器学习基础04

目录 1.朴素贝叶斯-分类 1.1贝叶斯分类理论 1.2条件概率 1.3全概率公式 1.4贝叶斯推断 1.5朴素贝叶斯推断 1.6拉普拉斯平滑系数 1.7API 2.决策树-分类 2.1决策树 2.2基于信息增益的决策树建立 2.2.1信息熵 2.2.2信息增益 2.2.3信息增益决策树建立步骤 2.3基于基…

如何解决IDE添加错误GitHub token后无法连接GitHub的问题

背景 当初学者首次使用IDE(IDEA、Xcode等)对GitHub仓库进行操作(push、fetch)时,会提示输入GitHub账户和token,如果这时候你一不小心输入了错误的token,之后你就叫天天不应叫地地不灵了&#xf…

PPT技巧:如何合并PPT文件?

在工作与学习中,PPT(PowerPoint)演示文稿已成为信息传递、项目汇报、教育培训等领域不可或缺的工具。随着任务的累积,我们往往会积累大量单独的PPT文件,每个文件可能包含特定章节、项目阶段或是不同主题的内容。为了更…

安全见闻1-5

涵盖了编程语言、软件程序类型、操作系统、网络通讯、硬件设备、web前后端、脚本语言、病毒种类、服务器程序、人工智能等基本知识,有助于全面了解计算机科学和网络技术的各个方面。 安全见闻1 1.编程语言简要概述 C语言:面向过程,适用于系统…

k-近邻算法(K-Nearest Neighbors, KNN)详解:机器学习中的经典算法

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

LeetCode297.二叉树的序列化和反序列化

题目要求 序列化是将一个数据结构或者对象转换为连续的比特位的操作,进而可以将转换后的数据存储在一个文件或者内存中,同时也可以通过网络传输到另一个计算机环境,采取相反方式重构得到原数据。 请设计一个算法来实现二叉树的序列化与反序…

蓝牙5.0模块助力闹钟升级,开启智能生活第一步

随着智能家居产业的快速发展,智能闹钟作为其中一个重要的品类,逐渐从单一的时间提醒功能演变为集音频播放、语音交互、智能控制等多种功能于一体的智能设备。而在这些功能的实现中,蓝牙音频模组扮演着核心角色。 1、蓝牙音频模组的功能概述 …

自己动手写Qt Creator插件

文章目录 前言一、环境准备1.先看自己的Qt Creator IDE的版本2.下载源码 二、使用步骤1.参考原本的插件2.编写自定义插件1.cmakelist增加一个模块2.同理,qbs文件也增加一个3.插件源码 三、效果总结 前言 就目前而言,Qt Creator这个IDE,插件比…

力扣经典面试题

1.本题的目标是判断字符串ransomNote是否由字符串magazine中的字符构成,且由magazine中的每个字符只能在ransomNote中使用一次 2.采用的方法是通过一个字典cahr_countl来统计magazine字符串中每个字符出现的次数 3.然后遍历ransomNote字符串,对于其中的…

Java开发人员从了学习ArkTs笔记(三)-数据结构与线程通信全解析

大家好,我是一名热爱Java开发的开发人员。目前,我正在学习ARKTS(Advanced Java Knowledge and Technology Stack),并将不断输出我的学习笔记。我将在这里分享我学习ARKTS的过程和心得,希望能够为其他开发人…

Java基础——预定义类/自定义类封装什么是Final类型

目录 预定义类——日历输出: 自定义类——在Java文件中: 什么是封装? 什么是final类型? 修饰变量: 修饰方法: 修饰类: 预定义类——日历输出: 例如:Math类、Date类…

spi 回环

///tx 极性0 (sclk信号线空闲时为低电平) /// 相位0 (在sclk信号线第一个跳变沿进行采样) timescale 1ns / 1ps//两个从机 8d01 8d02 module top(input clk ,input rst_n,input [7:0] addr ,input …

20241114软考架构-------软考案例16答案

每日打卡题案例16答案 16.【2017年真题】 难度:简单 阅读以下关于软件架构评估的叙述,在答题纸上回答问题1和问题2.(共25分) 【说明】 某单位为了建设健全的公路桥梁养护管理档案,拟开发一套公路桥梁在线管理系统。在系统的需求分析与架构设…