如何按数字大小排序图片文件名数组？默认.sort()方法无效

问题背景 #

现有如下JavaScript数组：

var 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",
        ];

需要按文件名中最后一段数字的数值大小从小到大排序，但使用默认的sort()方法后数组无变化，期望得到如下结果：

[
          "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",
        ]

问题原因 #

JavaScript的Array.sort()默认采用字符串Unicode字典序排序，而非数值排序。比如字符串"13810"会排在"1386"前面，因为字典序中第四个字符'1'的编码小于'6'，但数值上13810远大于1386，这就导致默认排序不符合需求。

解决方案 #

需要自定义排序比较函数，先提取每个文件名末尾的数字并转换为数值，再进行比较：

方法1：拆分字符串提取数字 #

img.sort((a, b) => {
  // 提取文件名末尾的数字部分
  const numA = parseInt(a.split('_').pop().replace('.webp', ''), 10);
  const numB = parseInt(b.split('_').pop().replace('.webp', ''), 10);
  // 数值比较，返回差值实现从小到大排序
  return numA - numB;
});

方法2：正则表达式匹配数字 #

如果文件名格式固定，用正则可以更精准地定位目标数字：

img.sort((a, b) => {
  // 匹配最后一个下划线后、.webp前的数字
  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;
});

两种方法执行后，数组都会按照末尾数字的数值从小到大排序，得到期望的结果。

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