Angular Material mat-sort字母数字混合编码列正确排序求助

要解决correlative_request这类字母-数字混合编码的排序问题，核心是将编码拆分为片段，分别按字符串（字母部分）和数值（数字部分）比较，而非单纯按字符串逐位比对。

实现步骤： #

1. 编写自定义比较函数，处理编码的拆分与分段比较

function compareCorrelative(a: string, b: string): number {
  // 按分隔符'-'拆分编码为多个片段
  const partsA = a.split('-');
  const partsB = b.split('-');

  // 遍历每个片段逐一比较
  for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
    const partA = partsA[i] || '';
    const partB = partsB[i] || '';

    // 判断当前片段是否为数字
    const numA = Number(partA);
    const numB = Number(partB);

    if (!isNaN(numA) && !isNaN(numB)) {
      // 数字片段按数值大小比较
      if (numA !== numB) {
        return numA - numB;
      }
    } else {
      // 非数字片段按字符串规则比较
      const strCompare = partA.localeCompare(partB);
      if (strCompare !== 0) {
        return strCompare;
      }
    }
  }

  // 所有片段完全一致时返回0
  return 0;
}

2. 重写MatTableDataSource的sortData方法，将自定义比较逻辑应用到排序中

// 替换YourDataType为你的数据实体类型
this.dataSource.sortData = (data: YourDataType[], sort: MatSort) => {
  if (!sort.active || sort.direction === '') {
    return data;
  }

  return data.sort((a, b) => {
    const isAscending = sort.direction === 'asc';
    const valA = a.correlative_request;
    const valB = b.correlative_request;
    // 调用自定义比较函数
    const comparisonResult = compareCorrelative(valA, valB);
    // 根据排序方向返回结果
    return isAscending ? comparisonResult : -comparisonResult;
  });
};

原理说明： #

默认的localeCompare按字符逐位比对，会导致029因第二位字符2小于03的第二位字符3而排在前面。自定义函数将编码拆分为独立片段后，数字部分转为数值比较，能保证03（数值3）小于029（数值29），得到符合预期的排序结果。

测试验证：

const testArray = ['B-23-3-0', 'B-23-3-02', 'B-23-3-03', 'B-23-3-029'];
testArray.sort(compareCorrelative);
// 输出结果：['B-23-3-0', 'B-23-3-02', 'B-23-3-03', 'B-23-3-029']

内容的提问来源于stack exchange，提问作者Izlia