在 JavaScript 中获取文件扩展名

1. JavaScript 中使用 .split() 和 .pop() 方法获取文件扩展名
2. JavaScript 中使用 .substr() 方法获取文件扩展名
3. JavaScript 中使用 .slice() 方法获取文件扩展名
4. JavaScript 中使用 ES6 object destructuring 方法获取文件扩展名

文件名带有扩展名，可帮助操作系统和用户识别文件类型。大多数扩展名是三个字符长，但有时可能更多。例如，像 .doc、.xls、.ppt 等较旧的 Microsoft Office 扩展名曾经是三个字符，但较新的扩展名如 .docx、.xlsx、.pptx 是四个字符。让我们看看使用内置 javascript 方法从文件名中提取扩展名部分的几种方法。

JavaScript 中使用 .split() 和 .pop() 方法获取文件扩展名

.split() 函数将字符串拆分为字符串数组。它根据作为第一个参数传递给函数的某种模式将字符串分解为子字符串的数组。.pop() 是 javascript 中的一个内置函数，它删除数组的最后一个元素并返回它。因此，我们可以结合使用这些方法来从文件名中获取扩展名。让我们看看下面的代码来了解用法。

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.split(".").pop());
console.log(file2.split(".").pop());

输出：

txt
xlsx

在代码中，我们使用 .split(".") 函数将文件名字符串按 . 分割将其分解为多个部分。.pop() 函数返回损坏的文件名数组的最后一个值。JavaScript .pop() 函数改变了我们应用它的字符串数组。

即使对于具有多个 . 的文件名，该方法也能很好地工作。在他们之中。.split(".").pop() 将返回分割文件名中的最后一段。因此，从给定的文件名中获取文件扩展名是一种聪明的方法。

JavaScript 中使用 .substr() 方法获取文件扩展名

为了提取文件名，我们在处理文件名字符串时使用字符串操作。另一种获取扩展名的方法是使用 substr() 函数。顾名思义，substring() 函数返回一段由作为参数传递给该函数的索引定义的字符串。它需要两个参数，起始索引和结束索引。该函数返回起始索引和结束索引之间的字符串，包括 starting index 处的字符并排除 ending index 处的字符。因此，我们可以使用 substring 函数来提取文件的扩展名。参考以下代码。

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.substr(-3));
console.log(file2.substr(-4));

输出：

txt
xlsx

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.substr( (file1.lastIndexOf(".")+1 - file1.length) ) );
console.log(file2.substr( (file2.lastIndexOf(".")+1 - file2.length) ) );

输出：

txt
xlsx

JavaScript 中使用 .slice() 方法获取文件扩展名

我们正在处理文件名的字符串数据类型。因此，我们可以应用 string 运算符。一种这样的操作符是 .slice()。它的工作原理类似于 substr() 函数并返回由 start index 和 end index 定义的数组部分。如果我们只向 slice() 函数传递一个值，它会将该索引值视为 开始索引。并将从该点返回字符串。使用 slice 获取文件扩展名，请参考以下代码。

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.slice( ( (file1.lastIndexOf(".") - 1) + 2) ) );
console.log(file2.slice( ( (file2.lastIndexOf(".") - 1) + 2) ) );

输出：

txt
xlsx

.slice() 函数不会篡改我们应用它的字符串。因此，我们可以毫无保留地轻松使用该方法。从文件名字符串中提取文件扩展名也是一种更快的方法。

JavaScript 中使用 ES6 object destructuring 方法获取文件扩展名

对象解构是 ES6 标准中引入的一个新特性。有了它，我们可以打开一个 javascript 对象并将这些属性绑定到变量。我们可以使用它从文件名中获取扩展名。参考以下代码。

let file1 = "somefile.txt";
const [ext, ...fileName] = file1.split('.').reverse();
console.log(ext);

输出：

txt

该代码使用 javascript 的 split(".") 函数使用 "." 拆分文件名，以获取文件名部分的数组。它将包括由 .split() 函数输出的数组的不同索引中返回的文件名和扩展名。.reverse() 方法反转我们应用它的数组。反转数组的第一个元素将保存扩展值。我们使用 ES6 javascript 的 JavaScript 对象解构机制进一步提取 [ext, ...fileName] 中的 ext 变量。最后，我们可以记录 ext 以获得文件扩展名。