IE9环境下如何排序含数字后缀的字符串数组？

嘿，这个问题我太熟悉了！你用Intl.Collator的方法确实是现代浏览器里处理这类“带数字的字符串”排序的最优解，但无奈IE9确实不支持这个API。别发愁，咱们可以自己写自定义排序函数来实现同样的效果，而且完全兼容IE9。

我给你两种方案，按需选择：

方案一：针对固定格式的简化版（适合你的场景） #

你的数组元素都是"ob"+数字的固定格式，那咱们可以直接提取每个字符串里的数字部分，然后按数字大小排序：

var myArr = ["ob1","ob10","ob4","ob5","ob12"];
myArr.sort(function(a, b) {
  // 去掉前缀"ob"，提取数字并转为整数
  const numA = parseInt(a.replace('ob', ''), 10);
  const numB = parseInt(b.replace('ob', ''), 10);
  // 数字升序排序，降序的话反过来就行
  return numA - numB;
});
// 排序后结果：["ob1", "ob4", "ob5", "ob10", "ob12"]

这个方法简单直接，性能也不错，完全兼容IE9——用到的replace、parseInt和sort都是IE9完全支持的API。

方案二：通用版（支持任意混合文本+数字的场景） #

如果以后你的字符串格式可能变化（比如变成"item23a"、"group100-2"这类混合格式），那可以用更通用的方法：把字符串拆分成“文本段”和“数字段”，然后逐个片段比较：

首先写一个辅助函数，用来拆分字符串：

function splitStringToParts(str) {
  // 用正则把字符串拆成连续的文本或数字片段，再把数字转为Number类型
  return str.match(/(\d+|\D+)/g).map(part => {
    return /^\d+$/.test(part) ? parseInt(part, 10) : part;
  });
}

然后用这个辅助函数来排序：

var myArr = ["ob1","ob10","ob4","ob5","ob12"];
myArr.sort(function(a, b) {
  const aParts = splitStringToParts(a);
  const bParts = splitStringToParts(b);
  
  // 逐个比较每个片段
  for (let i = 0; i < Math.min(aParts.length, bParts.length); i++) {
    const partA = aParts[i];
    const partB = bParts[i];
    
    if (partA !== partB) {
      // 如果都是数字，按数值大小比较
      if (typeof partA === 'number' && typeof partB === 'number') {
        return partA - partB;
      } else {
        // 如果是文本，按字符串规则比较（想要大小写不敏感的话可以转toLowerCase）
        return partA.localeCompare(partB);
      }
    }
  }
  
  // 如果前面的片段都相同，短的字符串排在前面
  return aParts.length - bParts.length;
});

这个方法能处理几乎所有混合文本和数字的排序场景，比如["a1b10", "a1b2", "a2"]这种复杂情况也能正确排序，同样完全兼容IE9。

两种方案都能解决你的问题，根据你的实际场景选就行啦！

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