Angular/TypeScript：对包含数字的字符串数组进行排序

你可以通过数组的sort()方法结合自定义比较函数来实现这个需求，核心是先区分字符串类型，再分别处理排序逻辑：

步骤说明 #

• 先判断字符串是否以数字开头：用正则/^\d/匹配开头的数字字符
• 让不以数字开头的字符串排在以数字开头的字符串前面
• 同一类别内的排序规则：
  • 非数字开头的字符串：直接按字母顺序排序
  • 数字开头的字符串：先移除开头的数字及后续可能的空格，再按剩余部分的字母顺序排序

TypeScript 代码示例 #

const arr = ["100 abc", "ad", "5 star", "orange"];

const sortedArr = arr.sort((a, b) => {
  // 判断字符串是否以数字开头
  const aHasNumStart = /^\d/.test(a);
  const bHasNumStart = /^\d/.test(b);

  // 类型不同：非数字开头的优先排在前面
  if (!aHasNumStart && bHasNumStart) return -1;
  if (aHasNumStart && !bHasNumStart) return 1;

  // 类型相同，执行内部排序逻辑
  if (!aHasNumStart) {
    // 非数字开头：直接按字母顺序比较
    return a.localeCompare(b);
  } else {
    // 数字开头：提取数字后的纯文本部分再比较
    const aTrimmed = a.replace(/^\d+\s*/, '');
    const bTrimmed = b.replace(/^\d+\s*/, '');
    return aTrimmed.localeCompare(bTrimmed);
  }
});

console.log(sortedArr.join(', ')); // 输出：ad, orange, 100 abc, 5 star

代码解释 #

• localeCompare()：用于字符串的自然语言排序，比直接用>/<比较更可靠，支持多语言场景
• 正则/^\d+\s*/：匹配开头的一个或多个数字，以及后续的所有空格，替换为空后得到纯文本部分
• 比较函数返回值：返回-1表示a排在b前面，1表示b排在a前面，0表示两者顺序不变

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