JavaScript通过文件地址获取文件名称

在 JavaScript 中，可以通过文件链接地址提取文件名称。文件名称通常是链接中最后一个 / 之后的部分，可能还包含查询参数或哈希片段。以下是几种常见的提取文件名称的方法：

---

方法 1：使用 URL 对象和 pathname

URL 对象可以解析链接地址，并通过 pathname 获取路径部分，然后提取文件名。

代码示例：

function getFileNameFromUrl(url) {// 创建 URL 对象const urlObj = new URL(url);// 获取路径部分（例如：/path/to/file.pdf）const pathname = urlObj.pathname;// 提取文件名（最后一个 / 之后的部分）const fileName = pathname.substring(pathname.lastIndexOf('/') + 1);return fileName;
}// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

---

方法 2：使用 split 和 pop

通过 split 方法将链接地址按 / 分割成数组，然后使用 pop 获取最后一个部分。

代码示例：

function getFileNameFromUrl(url) {// 去掉查询参数和哈希片段const cleanUrl = url.split('?')[0].split('#')[0];// 按 / 分割路径，获取最后一个部分const fileName = cleanUrl.split('/').pop();return fileName;
}// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

---

方法 3：使用正则表达式

通过正则表达式匹配文件名部分。

代码示例：

function getFileNameFromUrl(url) {// 匹配最后一个 / 之后的部分（不包括查询参数和哈希片段）const regex = /\/([^\/?#]+)[^\/]*$/;const match = url.match(regex);// 如果匹配成功，返回文件名return match ? match[1] : null;
}// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

---

方法 4：处理带有查询参数或哈希片段的情况

如果文件名可能包含查询参数或哈希片段，可以通过以下方法提取纯净的文件名。

代码示例：

function getFileNameFromUrl(url) {// 创建 URL 对象const urlObj = new URL(url);// 获取路径部分const pathname = urlObj.pathname;// 提取文件名（最后一个 / 之后的部分）const fileNameWithParams = pathname.substring(pathname.lastIndexOf('/') + 1);// 去掉查询参数和哈希片段const fileName = fileNameWithParams.split('?')[0].split('#')[0];return fileName;
}// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

---

方法 5：处理没有文件名的链接

如果链接地址没有文件名（例如以 / 结尾），可以返回一个默认值或空字符串。

代码示例：

function getFileNameFromUrl(url) {const urlObj = new URL(url);const pathname = urlObj.pathname;// 如果路径以 / 结尾，返回空字符串或默认值if (pathname.endsWith('/')) {return ''; // 或者 return 'index.html';}// 提取文件名const fileName = pathname.substring(pathname.lastIndexOf('/') + 1);return fileName;
}// 示例
const url1 = "https://example.com/path/to/file.pdf";
const url2 = "https://example.com/path/to/";console.log(getFileNameFromUrl(url1)); // 输出：file.pdf
console.log(getFileNameFromUrl(url2)); // 输出：'' 或 'index.html'

---

总结

提取文件名称的常用方法包括：

1. 使用 URL 对象和 pathname：推荐使用，兼容性好。
2. 使用 split 和 pop：简单直接，适合大多数场景。
3. 使用正则表达式：灵活，适合复杂场景。
4. 处理查询参数和哈希片段：确保提取的文件名是纯净的。

根据你的需求选择合适的方法即可。