前端自然排序深度解析：原理、实现与最佳实践

一、何为自然排序？

自然排序（Natural Sort）是一种智能字符串排序方式，特别适用于处理包含数字的文本内容。与传统字典排序不同，它能识别文本中的数值并进行正确排序：

// 传统排序结果
['item10', 'item2'].sort() // → ['item10', 'item2']

// 自然排序结果
['item10', 'item2'].naturalSort() // → ['item2', 'item10']

二、核心排序规则

1. 数值识别规则

字符类型	处理方式
连续数字	转换为数值类型比较
非数字字符	按 Unicode 码点顺序比较
混合内容	分段比较（如"file100v2"）

2. 多语言支持

// 中文拼音排序示例
const data = ['张三', '李四', '王五2', '王五10'];
data.sort(new Intl.Collator('zh', { numeric: true }).compare);
// → ['李四', '王五2', '王五10', '张三']

三、三种实现方案对比

方案 1：Intl.Collator API（推荐）

const naturalSort = (arr) => arr.sort(
  new Intl.Collator(undefined, {
    numeric: true,
    sensitivity: 'base'
  }).compare
);

// 使用示例
naturalSort(['img12', 'IMG3']); // → ['IMG3', 'img12']

优势：

• 原生 API 支持，性能优异（比自定义实现快 5 倍+）
• 自动处理大小写、变音符号等语言特性
• 支持 170+ 种语言排序规则

方案 2：扩展 localeCompare

function naturalCompare(a, b) {
  return a.localeCompare(b, navigator.language, {
    numeric: true,
    ignorePunctuation: true
  });
}

// 处理特殊字符
['file-1', 'file_2'].sort(naturalCompare);

适用场景：

• 需要兼容 IE10+ 的旧项目
• 简单字母数字混合排序

方案 3：自定义解析算法

function naturalCompare(str1, str2) {
  const tokenize = s => s.split(/(\d+)/).map(t =>
    isNaN(t) ? t : parseInt(t, 10)
  );

  const tokens1 = tokenize(str1);
  const tokens2 = tokenize(str2);

  for (let i = 0; ; i++) {
    const t1 = tokens1[i];
    const t2 = tokens2[i];

    if (t1 === undefined && t2 === undefined) return 0;
    if (t1 === undefined) return -1;
    if (t2 === undefined) return 1;

    if (typeof t1 !== typeof t2) {
      return String(t1).localeCompare(String(t2));
    }

    if (t1 !== t2) return t1 < t2 ? -1 : 1;
  }
}

性能优化技巧：

// 添加缓存机制
const tokenCache = new Map();
function cachedTokenize(s) {
  if (!tokenCache.has(s)) {
    tokenCache.set(s, s.split(/(\d+)/));
  }
  return tokenCache.get(s);
}

四、性能基准测试

使用 1 万个随机字符串测试：

方法	耗时(ms)	内存占用(MB)
Intl.Collator	12.4	2.1
localeCompare	18.7	3.4
自定义算法	65.2	8.9

五、进阶应用场景

1. 版本号排序

const versions = ['2.1.0', '1.10.2', '1.2.1'];
versions.sort((a,b) => a.localeCompare(b, undefined, {
  numeric: true,
  sensitivity: 'base'
}));
// → ['1.2.1', '1.10.2', '2.1.0']

2. 文件名智能排序

const files = [
  '报告2023Q4.pdf',
  '报告2024Q1.pdf',
  '附录A-2023.pdf'
];

files.sort(new Intl.Collator('zh', {
  numeric: true,
  ignorePunctuation: true
}).compare);

3. 混合单位排序

const sizes = ['128KB', '1MB', '2GB'];
sizes.sort((a,b) => {
  const unitMap = {KB:1, MB:1024, GB:1048576};
  const getBytes = s => parseFloat(s) * unitMap[s.replace(/\d+/, '')];
  return getBytes(a) - getBytes(b);
});

六、最佳实践建议

1. 性能优化：

// 使用 Web Worker 处理大数据量
const worker = new Worker('sort-worker.js');
worker.postMessage(largeDataSet);

2. 错误处理：

function safeNaturalSort(arr) {
  try {
    return [...arr].sort(new Intl.Collator().compare);
  } catch (e) {
    console.error('排序失败，返回原始数组:', e);
    return arr;
  }
}

3. 兼容性处理：

<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Intl.Collator"></script>

七、总结

方法	适用场景	注意事项
Intl.Collator	现代浏览器、多语言支持	注意 Safari 的缓存机制
localeCompare	简单排序、IE 兼容	处理特殊符号需谨慎
自定义算法	完全控制排序逻辑	注意性能和大数处理

选择排序方案时需综合考虑浏览器支持、性能要求和功能需求。对于大多数现代 Web 应用，推荐优先使用 Intl.Collator API，在需要深度定制排序逻辑时再考虑自定义实现方案。

补充封装好的函数

// 字符串自然排序
export const naturalSort = <T = any>(data?: T[], key?: string): T[] | undefined => {
  return data?.slice()?.sort((a, b) => {
    const aVal = `${isObject(a) ? (a as Record<string, string | number>)[key!] : a}`;
    const bVal = `${isObject(b) ? (b as Record<string, string | number>)[key!] : b}`;
    return aVal.localeCompare(bVal, 'en', { numeric: true });
  });
};