与打字 `window.location` 集

在前端开发中，我们经常需要操作浏览器的地址栏和 URL。其中，window.location 对象提供了许多有用的属性和方法，可以帮助我们方便地获取和修改当前页面的 URL。

获取 URL 信息

window.location.href

该属性返回当前页面的完整 URL。例如：

console.log(window.location.href);
// 输出：https://www.example.com/path/to/file.html?search=keyword#anchor

window.location.protocol

该属性返回当前页面的协议（如 HTTP 或 HTTPS）。例如：

console.log(window.location.protocol);
// 输出：https:

window.location.host 和 window.location.hostname

这两个属性都返回当前页面的主机名。不同之处在于 window.location.host 还包括端口号，而 window.location.hostname 不包括。例如：

console.log(window.location.host);
// 输出：www.example.com:8080

console.log(window.location.hostname);
// 输出：www.example.com

window.location.pathname

该属性返回当前页面的路径部分。例如：

console.log(window.location.pathname);
// 输出：/path/to/file.html

window.location.search

该属性返回当前页面的查询字符串部分（即 URL 中问号后面的内容）。例如：

console.log(window.location.search);
// 输出：?search=keyword

window.location.hash

该属性返回当前页面的锚点部分（即 URL 中井号后面的内容）。例如：

console.log(window.location.hash);
// 输出：#anchor

修改 URL 信息

window.location.href

通过修改该属性可以改变当前页面的完整 URL。例如：

window.location.href = 'https://www.example.com/new/path?query=string#new-anchor';

window.location.assign()

该方法与直接修改 window.location.href 的效果是一样的，也可以用来跳转到新的 URL。例如：

window.location.assign('https://www.example.com/new/path?query=string#new-anchor');

window.location.replace()

该方法可以用来替换当前页面的 URL，并且不会在浏览器的历史记录中留下记录。例如：

window.location.replace('https://www.example.com/new/path?query=string#new-anchor');

总结

window.location 对象提供了许多有用的属性和方法，可以帮助我们方便地获取和修改当前页面的 URL。掌握这些知识对于前端开发非常重要，尤其是在处理路由、跳转等方面。

注：以上示例代码仅供参考，请根据实际情况使用。

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