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排序时视为相同。因此这个表达式提供了更符合业务习惯的排序方式特别适合编码包含数字和字母的情况。