巧妙获取 JavaScript 中的文件扩展名，省心实用！

2024-03-16 07:46:10

如何巧妙获取 JavaScript 中的文件扩展名

简介

在处理文件时，识别文件的类型至关重要。通过获取文件扩展名，我们可以轻松了解文件的具体格式，从而采取适当的操作。在 JavaScript 中，获取文件扩展名的过程非常简单，本指南将详细介绍如何实现这一功能。

步骤 1：获取文件名

获取文件扩展名的第一步是获取文件的名称。我们可以使用 document.querySelector() 方法或 File 对象的 name 属性来获取文件名。

const file = document.querySelector('input[type=file]').files[0];
const fileName = file.name;

步骤 2：查找扩展名

有了文件名后，我们需要找到扩展名。扩展名通常位于文件名末尾，以句点（.）开头。

方法 1：正则表达式

我们可以使用正则表达式来匹配扩展名。以下正则表达式将匹配文件名中的扩展名：

/\.[0-9a-z]+$/i

它表示：

匹配句点.。
匹配字母（a-z）或数字（0-9）的序列。
匹配字符串的末尾（$）。
忽略大小写（i）。

方法 2：字符串方法

我们也可以使用字符串方法来提取扩展名。以下代码使用 split() 和 pop() 方法：

const fileExtension = fileName.split('.').pop();

它表示：

使用 split() 方法以句点.为分隔符将文件名拆分成数组。
使用 pop() 方法获取数组的最后一个元素，即扩展名。

代码示例

function getFileExtension(filename) {
  const matches = filename.match(/\.[0-9a-z]+$/i);
  return matches && matches.length ? matches[0].slice(1) : null;
}

const file1 = "50.xsl";
const file2 = "30.doc";
console.log(getFileExtension(file1)); // returns "xsl"
console.log(getFileExtension(file2)); // returns "doc"