vue3 字符串排序 localeCompare,确保排序为 “B01“, “B10“, “B2“

发布时间:2026/11/1 9:54:12

vue3 字符串排序 localeCompare,确保排序为 “B01“, “B10“, “B2“ 代码示例// 计算属性Getters /** * 按 acceptTypeCode 去重后的受理类别键值对列表仅包含编码和名称 * 并按 acceptTypeCode 自然排序数字部分按数值比较确保排序为 B01, B10, B2 */ const acceptTypeKeyValues computed(() { const seen new Setstring(); return acceptTypeOptions.value .map((item) ({ acceptTypeCode: item.acceptTypeCode, acceptTypeName: item.acceptTypeName })) .filter((item) { if (seen.has(item.acceptTypeCode)) return false; seen.add(item.acceptTypeCode); return true; }) .sort((a, b) // 第二个参数undefined指定 locale语言环境。传入 undefined 表示使用运行时默认的 locale通常由浏览器或 Node.js 环境决定。 a.acceptTypeCode.localeCompare(b.acceptTypeCode, undefined, { numeric: true, // 启用自然数字排序。例如 B2 会被排在 B10 前面因为数字部分按数值 2 10 比较而不是逐字符比较否则 B10 会排在 B2 前。 sensitivity: base // 设置字符串比较的敏感度。base 表示只比较基本字符忽略大小写和重音符号。例如 a 和 A 被认为是相等的é 和 e 也被视为相等。 }) ); });这段代码是一个字符串排序比较函数用于Array.prototype.sort()的回调中。它调用字符串的localeCompare方法并传入一些选项来控制比较行为。具体解释如下代码分解tsa.acceptTypeCode.localeCompare(b.acceptTypeCode, undefined, { numeric: true, sensitivity: base })a.acceptTypeCode当前元素的值。b.acceptTypeCode下一个元素的值。localeCompareJavaScript 字符串方法返回一个数字负数、0 或正数表示两个字符串在本地化排序中的相对顺序。第二个参数undefined指定 locale语言环境。传入undefined表示使用运行时默认的 locale通常由浏览器或 Node.js 环境决定。第三个参数选项对象numeric: true启用自然数字排序。例如B2会被排在B10前面因为数字部分按数值 2 10 比较而不是逐字符比较否则 B10 会排在 B2 前。sensitivity: base设置字符串比较的敏感度。base表示只比较基本字符忽略大小写和重音符号。例如a和A被认为是相等的é和e也被视为相等。作用总结这个表达式用于对acceptTypeCode进行自然排序数字按数值大小字母不区分大小写。它返回一个值供sort方法决定元素的先后顺序。示例假设有数组[B10, B2, B01]使用此比较函数排序后得到[B01, B2, B10]符合人类直觉。与普通localeCompare的区别不带选项localeCompare默认按字典序比较结果可能是[B01, B10, B2]因为字符 1 的 Unicode 码点小于 2。加了numeric: true数字部分按数值比较得到更自然的顺序。加了sensitivity: base忽略大小写差异例如b2和B2排序时视为相同。因此这个表达式提供了更符合业务习惯的排序方式特别适合编码包含数字和字母的情况。
延伸阅读

更多相关文章

2026/10/30 12:29:10

AI生成的沙盒地图为什么“大而空”?把这7项写进提示词

很多人第一次用自然语言生成沙盒游戏,会输入这样一句话: 做一个开放世界沙盒游戏,里面有山脉、城堡和道路,玩家可以自由探索。 生成结果往往很有气势:地图面积很大,有山、有城堡,也有纵横交错的…

2026/10/30 16:24:57

数据驱动如何革新青训?伊犁基地从经验到科学的实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/11/1 2:01:37

1.c++入门篇

1.c中的关键字asmdoifreturntrycontinueautodoubleinlineshorttypedefforbooldynamic_castintsignedtypeidpublicbreakelselongsizeoftypenamethrowcaseenummutablestaticunionwchar_tcatchexplicitnamespacestatic_castunsigneddefaultcharexportnewstructusingfriendclassext…

2026/11/1 2:01:37

《江灯合声》:有可行的分框版,也仍可以选择连续鸣谢

武汉江岸区栎坡合唱团在免费节目册《江灯合声》中,以表格集中鸣谢资助者。各家共同要求改为独立小框,团里仍想保留表格。现有全名与支持事项清楚可见,双方此前未承诺具体排版。我支持保留表格。补充的试排材料让选择更具体:分框能…

2026/11/1 2:01:37

关于“贾子猜想”的数学地位、结构特征与讨论边界

关于“贾子猜想”的数学地位、结构特征与讨论边界摘要 本文对“贾子猜想”进行基于公开表述与现有数学事实的分析。该猜想主张:当正整数 n3m>5(即 n6,9,12,15,…)时,方程x₁ⁿ x₂ⁿ ⋯ xₙⁿ yⁿ不存在正整数解。文章首先…

2026/11/1 2:01:37

启动报Port 8088 was already in use?先查是谁占的

启动报Port 8088 was already in use?先查是谁占的 项目启动报 Port 8088 was already in use,意思很直白:这个端口已经有人占了。 先说原理:端口是"门牌号",一间房只住一个进程 端口就是一台机器上的门牌号…

2026/11/1 2:01:37

担心文档上云?本地运行的办公AI才敢放心用

单位上周开了个会,主题是"AI 提效",散会时领导补了一句:涉及客户资料的文档,不许往云端传。这话一出,会议室里本来跃跃欲试的同事全蔫了——大家平时用的那些在线 AI,文档一上传就不知道存哪儿去…

2026/11/1 1:56:37

华为OD机试真题 新系统 2026-10-28 JavaGoC【社交网络消息转发】

目录 题目 思路 Code 题目 题目内容: 在一个社交网络中,有 N 个用户(编号 0 到 N−1);每个用户都有一个「转发名单」(整数),该数二进制格式中的第 i 位为 1 表示此用户会把消息转发给第 i 个用户。 给定一个整数数组 forwardLists 和一个整数 initialSenders,请…

2026/11/1 0:01:26

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/1 1:01:33

SSM电子书店源码全解析:结构、原理、部署与排错实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/11/1 0:01:26

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/1 1:01:33

SSM电子书店源码全解析:结构、原理、部署与排错实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/11/1 0:01:26

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/1 1:01:33

SSM电子书店源码全解析:结构、原理、部署与排错实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑