本文详解如何使用 javascript 的 `sort()` 方法，结合正则提取与数值比较，对含嵌入数字的文件名数组实现正确升序排序，避免默认字符串排序导致的 13810
在处理如 "IMG_COM_20220516_1150_41_1375.webp" 这类带时间戳和序列号的文件名时，直接调用 array.sort() 会触发字典序（lexicographic）比较，导致 "13810" 被认为小于 "1391"（因为 '1' === '1'，'3' === '3'，但 '8' > '9' 不成立，实际比较 '13810' 和 '1391' 时：'13810' 真实数值大小升序排列（即 1375
✅ 正确实现：精准提取末尾数字并数值比较
推荐使用正则表达式精准匹配下划线分隔的最后一组数字（位于 .webp 前），比 split("_").pop().split(".")[0] 更健壮（可处理文件名中其他位置含点或下划线的边界情况）：
const img = [
"IMG_COM_20220516_1150_41_1375.webp",
"IMG_COM_20220516_1150_41_13810.webp",
"IMG_COM_20220516_1150_41_1386.webp",
"IMG_COM_20220516_1150_41_1389.webp",
"IMG_COM_20220516_1150_41_13911.webp",
"IMG_COM_20220516_1150_41_13912.webp",
];
img.sort((a, b) => {
const numA = parseInt(a.match(/_(\d+)\.webp$/)[1], 10);
const numB = parseInt(b.match(/_(\d+)\.webp$/)[1], 10);
return numA - numB;
});
console.log(img);
// 输出：
// [
// "IMG_COM_20220516_1150_41_1375.webp",
// "IMG_COM_20220516_1150_41_1386.webp",
// "IMG_COM_20220516_1150_41_1389.webp",
// "IMG_COM_20220516_1150_41_13810.webp",
// "IMG_COM_20220516_1150_41_13911.webp",
// "IMG_COM_20220516_1150_41_13912.webp"
// ]⚠️ 关键注意事项
- parseInt(..., 10) 必须指定进制：防止以 0 开头的数字被误解析为八进制（尽管本例无此风险，但属最佳实践）；
- 正则需加 $ 锚定结尾：确保匹配的是最后一个 _ 后、.webp 前的数字，避免误捕其他数字（如日期中的 20220516）；
- .sort() 是原地排序：直接修改原数组；若需保留原始顺序，请先用 [...arr].sort(...) 或 arr.slice().sort(...)；
- 错误处理建议（生产环境）：对 match() 结果做空值检查，避免 null 导致 TypeError：
img.sort((a, b) => {
const matchA = a.match(/_(\d+)\.webp$/);
const matchB = b.match(/_(\d+)\.webp$/);
const numA = matchA ? parseInt(matchA[1], 10) : 0;
const numB = matchB ? parseInt(matchB[1], 10) : 0;
return numA - numB;
});? 扩展：支持降序与更通用的数字提取
若需降序排列，仅需交换 numA 与 numB：return numB - numA。
若文件扩展名不固定（如 .jpg, .png），可将正则改为 /_(\d+)\.[^.\s]+$/，提升兼容性。
掌握这种基于语义数字提取的排序逻辑，是处理日志文件、版本号、序列化资源路径等场景的核心技能——它让排序真正“懂”数据，而非仅比字符。
