本文详解如何对包含递增数字后缀的文件名数组进行正确数值排序，解决 `array.prototype.sort()` 默认字符串排序导致的 13810
在 JavaScript 中，Array.prototype.sort() 默认按字符串 Unicode 码点排序，而非数值大小。这会导致类似 "13810" 和 "13912" 的比较结果为 "13810" > "13912"（因为 '8' > '9' 在第二位即终止判断），从而产生不符合预期的顺序。
要实现按文件名中末尾数字的真实数值升序排列（如题中目标：1375 < 1386 < 1389 < 13810 < 13911 < 13912），必须提供自定义比较函数，并从中精确提取并解析数字部分。
✅ 正确做法：提取末尾数字并数值比较
观察文件名格式：IMG_COM_20220516_1150_41_1375.webp
数字部分始终位于最后一个下划线 _ 之后、扩展名 .webp 之前。因此可使用链式字符串操作精准提取：
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) => {
// 提取 a 中末尾数字：分割 "_" → 取最后一段 → 去掉 ".webp" → 转为整数
const numA = parseInt(a.split('_').pop().replace(/\.webp$/, ''), 10);
const numB = parseInt(b.split('_').pop().replace(/\.webp$/, ''), 10);
return numA - numB; // 升序；若需降序，改为 numB - numA
});
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) 必须指定基数 10：避免以 0 开头时被误解析为八进制（尽管本例无前导零，但属最佳实践）。
- 避免 split('.').pop() 风险：若文件名含多个点（如 IMG_v2.1_13810.webp），split('.') 会错误截断；推荐用正则 replace(/\.webp$/, '') 或更通用的 substring(0, lastIndexOf('.'))。
-
健壮性增强（可选）：生产环境建议加入容错逻辑，例如：
const extractNumber = str => { const match = str.match(/_(\d+)\.webp$/); return match ? parseInt(match[1], 10) : -Infinity; }; img.sort((a, b) => extractNumber(a) - extractNumber(b)); - 原地排序：sort() 直接修改原数组。如需保留原始顺序，请先 .slice() 或 [...arr] 浅拷贝。
✅ 总结
默认 sort() 是字符串字典序，不适用于嵌入式数字排序。通过正则或字符串切片精准定位数字片段 + parseInt 数值转换 + 自定义比较器，即可实现符合人类直觉的自然排序。此方法简洁、高效，且易于适配其他类似命名规则（如 .jpg, _v123.png 等），是处理文件列表、版本号、ID 序列等场景的标准解法。
