Angular Material表格含特殊字符/空格排序异常，需将特殊字符项置末

解决方案代码 #

替换原排序逻辑中的比较函数，统一处理含特殊字符的项排序：

sortData(sort: Sort) {
    console.log(JSON.stringify(sort));

    const data = ELEMENT_DATA.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }

    const isAsc = sort.direction === 'asc';

    this.sortedData = data.sort((a, b) => {
      switch (sort.active) {
        case 'position':
          return compareNumber(a.position, b.position, isAsc);
        case 'name':
          return compareWithSpecialChars(a.name, b.name, isAsc);
        case 'description':
          return compareWithSpecialChars(a.description, b.description, isAsc);
        default:
          return 0;
      }
    });
  }

// 检测字符串是否包含非字母数字的特殊字符（可根据需求调整正则）
function hasSpecialChars(str: string): boolean {
  return /[^a-zA-Z0-9]/.test(str);
}

function compareWithSpecialChars(a: string, b: string, isAsc: boolean) {
  const aHasSpecial = hasSpecialChars(a);
  const bHasSpecial = hasSpecialChars(b);

  // 优先级：不含特殊字符的项始终排在含特殊字符的项前面
  if (aHasSpecial && !bHasSpecial) {
    return isAsc ? 1 : -1;
  }
  if (!aHasSpecial && bHasSpecial) {
    return isAsc ? -1 : 1;
  }

  // 同类型项（都含/都不含特殊字符）按字符串正常排序
  return a.localeCompare(b, undefined, { sensitivity: 'base' }) * (isAsc ? 1 : -1);
}

function compareNumber(a: number, b: number, isAsc: boolean) {
  return (a - b) * (isAsc ? 1 : -1);
}

关键逻辑说明 #

1. 特殊字符检测：hasSpecialChars函数通过正则判断字符串是否包含非字母数字的特殊字符，你可以根据实际需求修改正则：
   • 若仅需将开头为特殊字符的项排末尾：修改正则为/^[^a-zA-Z0-9]/.test(str)
   • 若需排除空格（空格不算特殊字符）：修改正则为/[^a-zA-Z0-9\s]/.test(str)
2. 排序优先级：在比较时先区分是否含特殊字符，确保不含特殊字符的项始终排在前面；仅当两项类型相同时，才执行常规的字符串排序
3. 通用化处理：将name和description列的排序统一使用新的比较函数，保证所有字符串列遵循相同规则

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