在JavaScript中获取URL的最后一个路径段

在Web开发中，经常需要从URL中提取出重要信息，例如最后一个路径段。最后一个路径段通常用于指定页面或资源的标识符。在JavaScript中，我们可以使用几种方法来获取URL的最后一个路径段。下面我们将逐一介绍这些方法。

使用location对象

在JavaScript中，location对象表示当前文档的URL。我们可以使用location.pathname属性获取URL中的路径部分。如果我们的URL是https://example.com/blog/posts/123，则location.pathname将返回"/blog/posts/123"。

为了获取最后一个路径段，我们需要先将整个路径部分按"/"分割成一个数组，然后取数组的最后一个元素即可。以下是示例代码：

const pathArray = location.pathname.split("/");
const lastPathSegment = pathArray[pathArray.length - 1];
console.log(lastPathSegment); // "123"

使用正则表达式

我们还可以使用正则表达式来匹配URL中的最后一个路径段。以下是示例代码：

const url = "https://example.com/blog/posts/123";
const regexp = /\/[^\/]+$/;
const match = url.match(regexp);
const lastPathSegment = match ? match[0].slice(1) : null; // slice(1)去掉路径前面的"/"
console.log(lastPathSegment); // "123"

正则表达式/\/[^\/]+$/会匹配URL中以"/"开头，后面跟着任意字符但不包含"/"的字符串。由于正则表达式使用了贪婪匹配，因此我们可以保证匹配结果中不会包含其他路径段。

使用URL对象（需要浏览器支持）

在现代浏览器中，我们还可以使用URL对象来解析URL。URL对象是一个包含URL解析信息的对象，我们可以使用它的属性获取URL的各个部分。以下是示例代码：

const url = new URL("https://example.com/blog/posts/123");
const lastPathSegment = url.pathname.split("/").pop();
console.log(lastPathSegment); // "123"

new URL("https://example.com/blog/posts/123")会创建一个URL对象，我们可以使用url.pathname属性获取URL的路径部分。由于url.pathname是一个字符串，因此我们可以使用split()方法按"/"分割成一个数组。最后，我们可以使用pop()方法获取数组的最后一个元素。

需要注意的是，URL对象并不是所有浏览器都支持的特性。如果你需要使用URL对象，请先检查浏览器的兼容性。

总结

以上介绍了三种在JavaScript中获取URL的最后一个路径段的方法：使用location对象、使用正则表达式和使用URL对象。这三种方法各有优缺点，可以根据实际情况选择适合自己的方法。