如何在javascript中正确排序字符串数组

我有一个数组，如下所示

const files=['30.png'，'10.png'，'1.jpeg'，'2.jpeg'，'12.gif'，'4.png']

我想按数字顺序排序，但调用sort是一个问题，因为排序时，它将如下所示：

['1.jpeg'，'10.png'，'12.gif'，'2.jpeg'，'30.png'，'4.png']

如何以“正确”的方式对其进行排序，使其看起来像这样

['1.jpeg'，'2.jpeg'，'4.png'，'10.png'，'12.gif'，'30.png']

我们可以使用以下代码：

const files=['30.png'，'10.png'，'1.jpeg'，'2.jpeg'，'12.gif'，'4.png']；
函数fileToNumber（文件）{
//我们得到周期之前的所有数据，并将其转换为一个数字
返回parseInt（file.split（“.”[0]，10）；
}
//我们使用基于fileToNumber函数的自定义比较器进行排序
排序（（a，b）=>fileToNumber（a）-fileToNumber（b））；

我们可以使用以下代码：

const files=['30.png'，'10.png'，'1.jpeg'，'2.jpeg'，'12.gif'，'4.png']；
函数fileToNumber（文件）{
//我们得到周期之前的所有数据，并将其转换为一个数字
返回parseInt（file.split（“.”[0]，10）；
}
//我们使用基于fileToNumber函数的自定义比较器进行排序
排序（（a，b）=>fileToNumber（a）-fileToNumber（b））；

函数编号部分（str）{
返回parseInt（str.split（'.'）[0]）
}
const files=['30.png'，'10.png'，'1.jpeg'，'2.jpeg'，'12.gif'，'4.png']；
排序（（a，b）=>numberPart（a）-numberPart（b））
console.log（文件）

函数编号部分（str）{
返回parseInt（str.split（'.'）[0]）
}
const files=['30.png'，'10.png'，'1.jpeg'，'2.jpeg'，'12.gif'，'4.png']；
排序（（a，b）=>numberPart（a）-numberPart（b））
console.log（文件）