在Web开发中，获取请求地址栏的信息对于实现各种功能至关重要。JavaScript为我们提供了多种方法来获取URL的不同部分，如协议、域名、路径等。以下是一些实用的技巧，帮助你轻松掌握如何在JavaScript中获取请求地址栏的信息。
1. 获取完整的URL
要获取完整的URL，可以使用window.location.href属性。这个属性包含了当前页面加载的完整URL。
console.log(window.location.href); // 输出完整的URL
2. 获取协议和域名
使用window.location.protocol可以获取当前页面的协议，如http:或https:。而window.location.hostname可以获取域名。
console.log(window.location.protocol); // 输出协议，如http:
console.log(window.location.hostname); // 输出域名，如www.example.com
3. 获取路径和查询字符串
window.location.pathname可以获取URL中的路径部分，而window.location.search可以获取查询字符串。
console.log(window.location.pathname); // 输出路径，如/index.html
console.log(window.location.search); // 输出查询字符串，如?name=John&age=30
4. 获取哈希值
window.location.hash可以获取URL中的哈希值，通常用于锚点定位。
console.log(window.location.hash); // 输出哈希值，如#section1
5. 获取参数值
要获取查询字符串中的参数值，可以使用URLSearchParams对象。以下是一个示例：
// 假设当前URL为http://www.example.com/index.html?name=John&age=30
const params = new URLSearchParams(window.location.search);
console.log(params.get('name')); // 输出John
console.log(params.get('age')); // 输出30
6. 监听URL变化
使用window.addEventListener可以监听URL的变化。以下是一个示例，当URL发生变化时，会在控制台输出变化后的URL：
window.addEventListener('popstate', function(event) {
console.log('URL changed:', window.location.href);
});
7. 获取相对路径
要获取相对路径，可以使用window.location.pathname减去window.location.origin。
console.log(window.location.pathname); // 输出相对路径，如/index.html
console.log(window.location.origin); // 输出协议和域名，如http://www.example.com
console.log(window.location.pathname.slice(window.location.origin.length)); // 输出相对路径，如/index.html
通过以上技巧，你可以轻松地在JavaScript中获取请求地址栏的信息，从而实现各种功能。希望这些技巧能帮助你更好地掌握JavaScript编程。