js中获取当前url路径

在前端开发过程中，我们经常需要获取当前页面的URL路径，例如用于构建面包屑导航、页面分享等场景。本文将介绍3种常见的js方法来获取当前页面的URL路径。

location.href

const currentUrl = window.location.href;

上述代码中，window.location表示当前页面的URL信息，其中href表示页面的完整URL。通过该属性，我们可以获取带有协议、域名、端口号、路径以及查询参数、哈希值等信息的完整URL。例如当前页面的URL为http://www.example.com/index.html?param=value#anchor，则通过window.location.href获取的值即为该URL字符串。

location.pathname

const currentPath = window.location.pathname;

除了完整URL，我们还可以通过location.pathname获取当前页面的其余URL信息。该属性表示URL中的路径部分，也即协议、域名、端口号后面的内容。例如当前页面的URL为http://www.example.com/index.html?param=value#anchor，则通过window.location.pathname获取的值为/index.html。

window.location

const currentUrlObj = window.location;
const currentPath = currentUrlObj.pathname;

上述代码中，我们可以通过直接获取window.location属性，来获取当前页面的URL信息。该属性是一个对象，里面包含了很多与URL相关的信息。我们可以从该属性中获取hostname、search、hash等其他信息。与上述location.pathname类似，我们可以通过currentUrlObj.pathname获取当前页面的路径信息。

以上3种方法都是获取当前网页URL路径非常常见的方式。它们适用于绝大多数的URL获取场景，我们可以根据自己的需求选择不同的方式来获取当前页面的URL路径。