JavaScript字母排序问题：如何正确同时比较数值与字符串？

我完全懂你遇到的困扰——纯字符串排序会把带数字的内容按单个字符的Unicode码点来比，结果就是"10"会排在"2"前面，像"<1"这种带特殊符号的也会乱序，完全不符合我们对数字排序的直觉。咱们来搞定这个问题：

问题根源 #

你原来的排序逻辑是把字符串转小写后直接比较：

series.sort(function(a, b) {
  var textA = a.name.toLowerCase();
  var textB = b.name.toLowerCase();
  return textA < textB ? -1 : textA > textB ? 1 : 0;
});

这种方式对纯单词没问题，但对带数字的字符串，会按字符逐个对比：比如"10"的第一个字符'1'码点比"2"的'2'小，所以"10"会排在"2"前面，这显然不是你想要的。

解决方案：自定义自然排序函数 #

我们可以写一个能识别数字（包括带<这类符号的数字）的排序函数，把字符串拆成「非数字片段」和「数字片段」，分别按字符串和数值逻辑比较：

完整排序代码 #

function naturalSort(a, b) {
  // 统一转小写，保持大小写不敏感排序
  const textA = a.name.toLowerCase();
  const textB = b.name.toLowerCase();

  // 正则：匹配带<的数字、纯数字、非数字片段
  const segmentRegex = /(<)?(\d+)|(\D+)/g;
  const segmentsA = textA.match(segmentRegex) || [];
  const segmentsB = textB.match(segmentRegex) || [];

  let index = 0;
  // 逐个片段对比
  while (index < segmentsA.length && index < segmentsB.length) {
    const segA = segmentsA[index];
    const segB = segmentsB[index];

    // 判断当前片段是否是数字相关（包括<1这种）
    const isNumA = /^<?\d+$/.test(segA);
    const isNumB = /^<?\d+$/.test(segB);

    if (isNumA && isNumB) {
      // 处理数字：带<的转成比原数小一点的数值，确保排在纯数字前面
      const numA = segA.includes('<') 
        ? parseFloat(segA.slice(1)) - 0.1 
        : parseInt(segA, 10);
      const numB = segB.includes('<') 
        ? parseFloat(segB.slice(1)) - 0.1 
        : parseInt(segB, 10);

      if (numA !== numB) {
        return numA - numB;
      }
    } else {
      // 非数字片段用localeCompare做自然语言排序（比直接>更准确）
      const compareResult = segA.localeCompare(segB);
      if (compareResult !== 0) {
        return compareResult;
      }
    }
    index++;
  }

  // 如果一个是另一个的前缀，短的排在前面（比如"1"在"10"前面）
  return segmentsA.length - segmentsB.length;
}

// 调用排序
var series = response.series;
series = series.sort(naturalSort);

这个函数能处理的场景 #

• 纯数字："1"、"2"、"10"会按1 → 2 → 10排序
• 带特殊符号的数字："<1"会排在"1"前面
• 混合单词和数字：比如"group 2"、"group 10"会按正确的数字顺序排
• 纯单词：保持原来的字母顺序排序

测试示例 #

如果你的数据是：

const testData = [
  { name: "10" },
  { name: "<1" },
  { name: "2" },
  { name: "asian" },
  { name: "white" },
  { name: "african american" }
];

排序后会得到：
"<1" → "2" → "10" → "african american" → "asian" → "white"，完全符合预期。

可扩展调整 #

• 如果需要处理小数（比如"1.5"），把parseInt改成parseFloat即可
• 如果有">10"这类符号，可以加逻辑转成10.1，让它排在"10"后面
• 对多语言排序有要求的话，可以给localeCompare加参数，比如segA.localeCompare(segB, 'en', { sensitivity: 'base' })，忽略大小写和重音差异

内容的提问来源于stack exchange，提问作者Erica Stockwell-Alpert