React Select如何实现兼容字母与数字顺序的排序

纯字符串逐位对比ASCII码的排序逻辑，会导致字符串内夹带的数字部分按字符顺序排列，出现Reseller 10排在Reseller 2之前的错位，无法满足数字按实际数值排序的需求。

React Select本身没有内置排序规则，下拉选项的渲染顺序完全由传入的options数组顺序决定，只需要调整数组排序逻辑即可实现字母+数字的自然排序效果，不需要额外修改组件配置。

实现代码 #

直接使用JavaScript原生localeCompare方法，开启数字敏感排序配置，替换原有排序逻辑即可：

resellerList.sort((a1, a2) => {
  const name1 = a1.resellerName.toLowerCase();
  const name2 = a2.resellerName.toLowerCase();
  return name1.localeCompare(name2, undefined, {
    numeric: true, // 自动识别字符串中的数字片段，按实际数值大小排序
    sensitivity: 'base' // 忽略大小写、字符重音差异，和原有小写转换的排序规则对齐
  })
})

该排序规则满足：

• 英文字母部分按A-Z顺序排列，忽略大小写
• 字符串内的数字部分按实际数值排序，不会出现10排在2前的错位问题
• 完全兼容现有数据结构，不需要额外处理字段

当前纯字母排序效果 #

应用上述排序逻辑后，选项会按照Reseller 1、Reseller 2……Reseller 10、Reseller 11的顺序正常排列。

如果需要兼容不支持localeCompare高级配置的极老旧运行环境，可以额外引入正则拆分字符串片段、分别对比字母段和数字段的自定义排序逻辑，绝大多数现代浏览器、移动端环境直接使用上述方案即可。

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