URL路径的获取部分

当我们在前端开发中需要获取URL地址的路径部分时，可以使用 JavaScript 中的 location 对象来实现。本文将介绍如何利用 location 对象获取URL路径的相关信息。

获取完整路径

要获取浏览器当前页面的完整URL路径，可以使用 location.href 属性：

const fullUrl = location.href;
console.log(fullUrl); // 输出完整路径 https://www.example.com/path/to/page.html?query=string#hashvalue

获取路径部分

如果只需要获取URL地址中的路径部分（即排除查询字符串和哈希值），可以使用 location.pathname 属性：

const pathName = location.pathname;
console.log(pathName); // 输出路径部分 /path/to/page.html

该属性返回一个字符串，其中包含URL地址中的路径部分。

获取查询字符串

如果想要获取URL地址中的查询字符串部分，可以使用 location.search 属性：

const queryString = location.search;
console.log(queryString); // 输出查询字符串 ?query=string

该属性返回一个字符串，其中包含URL地址中的查询字符串部分。

获取哈希值

如果需要获取URL地址中的哈希值部分，则可以使用 location.hash 属性：

const hashValue = location.hash;
console.log(hashValue); // 输出哈希值 #hashvalue

该属性返回一个字符串，其中包含URL地址中的哈希值部分。

总结

通过上述代码示例，我们了解了如何在前端开发中使用 JavaScript 中的 location 对象来获取URL地址的路径部分。这些技巧可以帮助我们更好地处理URL地址的相关信息，为我们提供更好的开发体验和用户体验。

参考资料

• MDN Web 文档：Location

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10079