JS 获取文件名后缀|极客笔记

JS 获取文件名后缀

在前端开发中，经常会需要获取文件名的后缀，以便做出相应的处理。本文将介绍如何使用JavaScript来获取文件名的后缀。

1. 获取文件名后缀的方法

获取文件名后缀的方法有很多种，下面介绍几种常用的方法：

1.1 使用split方法

可以通过将文件名以.为分隔符，然后取最后一个元素作为文件名后缀。

示例代码如下：

function getExtension1(fileName) {
    return fileName.split('.').pop();
}

console.log(getExtension1('example.txt')); // 输出txt
console.log(getExtension1('example.html')); // 输出html

1.2 使用正则表达式

通过正则表达式匹配文件名中的.符号和后缀字符串，从而获取文件名后缀。

示例代码如下：

function getExtension2(fileName) {
    return fileName.match(/\.[^.]+$/)[0].substr(1);
}

console.log(getExtension2('example.txt')); // 输出txt
console.log(getExtension2('example.html')); // 输出html

1.3 使用lastIndexOf方法

通过lastIndexOf方法找到文件名中最后一个.的位置，然后截取后缀部分。

示例代码如下：

function getExtension3(fileName) {
    return fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
}

console.log(getExtension3('example.txt')); // 输出txt
console.log(getExtension3('example.html')); // 输出html

1.4 使用substring和lastIndexOf方法

通过substring和lastIndexOf方法组合使用，截取文件名后缀。

示例代码如下：

function getExtension4(fileName) {
    return fileName.substring(fileName.lastIndexOf('.') + 1);
}

console.log(getExtension4('example.txt')); // 输出txt
console.log(getExtension4('example.html')); // 输出html

2. 性能比较

上面介绍了四种方法来获取文件名后缀，在性能上会有些许差异。我们来对这四种方法进行性能比较。

2.1 性能测试代码

const fileName = 'example.txt';
const iterations = 100000;

console.time('split方法');
for (let i = 0; i < iterations; i++) {
    getExtension1(fileName);
}
console.timeEnd('split方法');

console.time('正则表达式');
for (let i = 0; i < iterations; i++) {
    getExtension2(fileName);
}
console.timeEnd('正则表达式');

console.time('lastIndexOf方法');
for (let i = 0; i < iterations; i++) {
    getExtension3(fileName);
}
console.timeEnd('lastIndexOf方法');

console.time('substring和lastIndexOf方法');
for (let i = 0; i < iterations; i++) {
    getExtension4(fileName);
}
console.timeEnd('substring和lastIndexOf方法');