本文详解如何使用 javascript 的 `sort()` 方法，结合正则提取与数值比较，实现对含数字后缀的文件名数组进行正确升序排序，避免默认字符串排序导致的 13810
在处理一批命名规范但数字部分位数不一的文件（如 “IMG_COM_20220516_1150_41_1375.webp”）时，直接调用 arr.sort() 会触发字典序（lexicographic）比较：”13810″ 被当作字符串与 “1386” 比较时，逐字符比对 ‘1’==’1′, ‘3’==’3′, ‘8’==’8′, ‘1’
要实现真正的数值升序排序，必须：
- 从每个文件名中精准提取末尾的纯数字（即下划线 _ 分隔的最后一段、且在 .webp 扩展名之前）；
- 将其转换为整数（parseInt），再参与比较；
- 在 sort() 的比较函数中返回 numA – numB，确保升序排列。
以下是完整、健壮的实现代码：
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) || 0; const numB = parseInt(b.match(/_(d+).webp$/)[1], 10) || 0; 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" // ]✅ 关键优化说明：
- 使用正则 /_(d+).webp$/ 直接捕获末尾 _ 后、.webp 前的连续数字，比多次 split() 更准确、更不易受中间下划线干扰；
- 显式指定 parseInt(…, 10) 防止八进制解析歧义；
- 添加 || 0 容错，避免匹配失败时 NaN 导致排序异常；
- 使用箭头函数提升可读性，且无需 return 关键字冗余。
⚠️ 注意事项：
- Array.prototype.sort() 是原地排序，会直接修改原数组。如需保留原始顺序，请先用 […arr].sort(…) 或 arr.slice().sort(…) 创建副本；
- 若需降序，仅需将 return numA – numB 改为 return numB – numA；
- 对于更复杂的自然排序（如混合字母数字的版本号），建议使用 Intl.Collator 或专用库（如 natural-sort），但本例中纯末尾数字场景，上述方案简洁高效、零依赖。
掌握这种“提取→转数→比较”模式，即可灵活应对各类基于内嵌数值的字符串排序需求。