使用 JavaScript 获取没有路径的文件名

目录

Get the filename without the path using JavaScript

1. 使用 JavaScript 获取没有路径的文件名
2. 使用 substring() 获取不带路径的文件名
3. 使用 path() 获取不带路径的文件名

使用 JavaScript 获取不带路径的文件名

要获取不带路径的文件名，请使用replace()以下正则表达式调用该方法：/^.*[\\\/]/作为第一个参数，一个空字符串作为第二个参数。

该方法将返回一个仅包含文件名的字符串。

function getFilename(fullPath) {
  return fullPath.replace(/^.*[\\\/]/, '');
}

// 👇️ myFile.png
console.log(getFilename('/my-folder/myFile.png'));

// 👇️ myFile.jpeg
console.log(getFilename('/my-folder/nested/myFile.jpeg'));

// 👇️ myFile.jpeg
console.log(getFilename('myFile.jpeg'));

我们创建了一个可重用的函数，它采用完整路径并返回文件名。

我们将以下 2 个参数传递给
String.replace
方法：

1. 我们要在字符串中匹配的正则表达式。
2. 正则表达式匹配的替换 – 在我们的例子中是一个空字符串，因为我们想删除文件名之前的所有内容。

正斜杠标记正则表达式的开始和结束。

脱^字符匹配输入的开头（字符串的开头）。

方括号[]称为字符类，在字符类中我们匹配反斜杠和正斜杠。

我们必须用另一个反斜杠转义反斜杠和正斜杠，因为反斜杠字符在正则表达式中有特殊含义。

如果您在阅读正则表达式时需要帮助，请将
来自 MDN 的正则表达式速查表添加为书签
。这是迄今为止最好的。

这适用于 Windows（反斜杠）和 Unix（正斜杠）路径。

使用 substring() 获取不带路径的文件名

或者，您可以使用该substring方法。

该substring方法将返回一个新字符串，其中仅包含最后一个斜线之后的字符。

function getFilename(fullPath) {
  return fullPath.substring(fullPath.lastIndexOf('/') + 1);
}

// 👇️ myFile.png
console.log(getFilename('/my-folder/myFile.png'));

// 👇️ myFile.jpeg
console.log(getFilename('/my-folder/nested/myFile.jpeg'));

// 👇️ myFile.jpeg
console.log(getFilename('myFile.jpeg'));

我们传递给String.substring方法的唯一参数

是要包含在返回字符串中的第一个字符的索引。

我们使用
String.lastIndexOf
方法获取字符串中最后一个正斜杠的索引并将其添加1到结果中，因为我们想从结果中排除最后一个斜杠。

The lastIndexOf method returns the index of the last occurrence of a substring
in a string.

If your environment is Node.js, you can use the built-in path module.

Get the filename without the path using path() #

To get the filename without the path in Node.js:

1. Import the path module.
2. Pass the full path string to the path.basename() method.
3. The function will extract the filename from the full path.

const path = require('path');

function getFilename(fullPath) {
  return path.basename(fullPath);
}

// 👇️ myFile.png
console.log(getFilename('/my-folder/myFile.png'));

// 👇️ myFile.jpeg
console.log(getFilename('/my-folder/nested/myFile.jpeg'));

// 👇️ myFile.jpeg
console.log(getFilename('myFile.jpeg'));

The basename method returns the last portion of a path.

It takes the fully qualified path as a parameter, extracts and returns the
filename.

您选择哪种方法是个人喜好的问题。如果我只需要处理路径中的正斜杠或反斜杠分隔符，我会使用该substring
方法，因为它易于阅读并且可以在 Node.js 和浏览器中使用。