JavaScript中含特殊字符的数字字符串数组升序排序问题

你当前用的排序逻辑是基于字符串字典序比较的，这就是为啥"10"会排在"3"前面——字符串比较是按单个字符的ASCII码来的，'1'比'3'小，自然"10"就排在"3"前面，而且带分数的字符串也没法直接转成数字参与比较，肯定达不到你要的效果。

要实现正确的数值升序排序，核心是把每个字符串解析成对应的浮点数值，再基于数值大小排序。

实现步骤 #

1. 写一个解析函数，把带分数的字符串转换成对应的数值：

function parseToNumber(str) {
  const parts = str.split(' ');
  let num = parseFloat(parts[0]);
  // 处理带分数的情况
  if (parts.length === 2) {
    switch(parts[1]) {
      case '½':
        num += 0.5;
        break;
      case '⅓':
        num += 1/3;
        break;
      case '⅔':
        num += 2/3;
        break;
      // 后续如果有其他分数符号，直接在这里加case就行
    }
  }
  return num;
}

2. 用这个解析函数来排序：

const data = ["10",  "11",  "12",  "13",  "14",  "3",  "35 ½",  "36",  "36 ⅔",  "37 ⅓",  "38",  "38 ⅔", "4", "40"];

// 解构数组避免修改原数据，不需要的话直接用data.sort()
const sortedData = [...data].sort((a, b) => {
  const numA = parseToNumber(a);
  const numB = parseToNumber(b);
  return numA - numB;
});

console.log(sortedData);
// 输出结果：["3", "4", "10", "11", "12", "13", "14", "35 ½", "36", "36 ⅔", "37 ⅓", "38", "38 ⅔", "40"]

为啥原逻辑不行 #

+(a > b) || -(a < b)本质还是在做字符串的字典序比较，因为a、b是字符串类型，a > b判断的是字符串的字符顺序，完全不考虑数值大小，自然处理不了多位数和带分数的排序场景。

内容的提问来源于stack exchange，提问作者Dang Khoa Duong