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

代码示例：

  // ========== 计算属性（Getters） ==========
  /**
   * 按 acceptTypeCode 去重后的受理类别键值对列表（仅包含编码和名称）
   * 并按 acceptTypeCode 自然排序（数字部分按数值比较，确保排序为 "B01", "B10", "B2"）
   */
  const acceptTypeKeyValues = computed(() => {
    const seen = new Set<string>();
    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 方法，并传入一些选项来控制比较行为。具体解释如下：

代码分解

ts

a.acceptTypeCode.localeCompare(b.acceptTypeCode, undefined, {
  numeric: true,
  sensitivity: "base"
})

• a.acceptTypeCode：当前元素的值。

• b.acceptTypeCode：下一个元素的值。

• localeCompare：JavaScript 字符串方法，返回一个数字（负数、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" 排序时视为相同。

因此，这个表达式提供了更符合业务习惯的排序方式，特别适合编码包含数字和字母的情况。