ExtJS ComboBox字符串特性排序异常，如何实现自然排序？

当前ComboBox的选项因是String类型，默认按字典序排序，导致数字部分按字符顺序排列（比如"A 11"排在"A 2"前）。要实现自然排序（数字按数值大小排列），前端可以通过以下两种方式处理：

方法一：利用localeCompare原生支持 #

现代浏览器的String.prototype.localeCompare方法支持numeric参数，开启后会自动识别字符串中的数字并按数值比较，实现自然排序，代码简洁高效：

// 假设原始选项数组
const rawOptions = ["A 1", "A 11", "A 2", "A 21", "A 3"];

// 自然排序处理
const sortedOptions = rawOptions.sort((a, b) => {
  return a.localeCompare(b, undefined, {
    numeric: true, // 开启数字数值比较逻辑
    sensitivity: 'base' // 忽略大小写和重音，可按需调整
  });
});

将排序后的sortedOptions作为ComboBox的数据源即可，这种方法无需手动拆分字符串，兼容性覆盖绝大多数现代浏览器。

方法二：自定义排序函数（手动拆分前缀与数字） #

如果需要更精细的格式控制（比如前缀包含特殊字符），可以手动拆分字符串中的前缀和数字部分，分别比较：

const rawOptions = ["A 1", "A 11", "A 2", "A 21", "A 3"];

const naturalSort = (a, b) => {
  // 匹配前缀（非数字部分）和数字部分的正则
  const pattern = /^([^\d]+)(\d+)/;
  const matchA = a.match(pattern);
  const matchB = b.match(pattern);

  // 不符合格式的选项按默认字典序排序
  if (!matchA || !matchB) {
    return a.localeCompare(b);
  }

  // 提取前缀（去除多余空格）和数字数值
  const prefixA = matchA[1].trim();
  const prefixB = matchB[1].trim();
  const numA = parseInt(matchA[2], 10);
  const numB = parseInt(matchB[2], 10);

  // 先比较前缀，前缀相同再比较数字大小
  const prefixDiff = prefixA.localeCompare(prefixB);
  return prefixDiff !== 0 ? prefixDiff : numA - numB;
};

const sortedOptions = rawOptions.sort(naturalSort);

组件应用 #

无论用哪种方法，只需将排序后的数组绑定到ComboBox的数据源属性：

• Vue的el-select：将sortedOptions赋值给v-for遍历的数组
• React的Select组件：将sortedOptions作为options属性的数据源

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