JavaScript 中对 URL 的使用

在现代网页开发中，JavaScript 对 URL 的操作至关重要。通过 URL，我们可以获取和传递各种信息，实现页面之间的交互与数据共享。

了解如何获取当前页面的 URL。在 JavaScript 里，使用 window.location 对象能够轻松获取这一信息。window.location.href 返回完整的当前页面 URL，包括协议（如 http 或 https）、域名以及路径等所有部分。例如，若当前页面是 “https://www.example.com/products/detail/123”，window.location.href 就会精确返回这个字符串。

除了完整的 URL，我们还常常需要获取 URL 的特定部分。window.location.protocol 会返回协议部分，如 “https:”；window.location.host 则返回域名和端口号，像 “www.example.com:80”；window.location.pathname 只返回路径部分，即 “/products/detail/123”。这些属性在处理不同的业务逻辑时非常有用。

当需要对 URL 进行解析时，URLSearchParams 接口是个强大的工具。假设 URL 中有查询参数，如 “https://www.example.com?name=John&age=30”，可以通过以下方式解析：

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
const age = urlParams.get('age');
console.log(name, age);

这能准确提取出查询参数的值。

不仅如此，JavaScript 还能创建和修改 URL。我们可以使用 new URL() 构造函数来创建一个新的 URL 对象。例如：

const newUrl = new URL('https://www.example.com/new-page');

然后，通过修改其属性来调整 URL。比如添加查询参数：

newUrl.searchParams.append('key', 'value');

最后，在页面跳转时，利用 window.location.assign() 方法可以加载新的 URL 页面。若想在历史记录中添加一条记录，使用 window.history.pushState() 方法更为合适，它允许在不刷新页面的情况下改变当前的 URL 状态。

JavaScript 对 URL 的灵活运用，极大地提升了网页开发的效率和用户体验。无论是获取信息、解析参数，还是创建与修改 URL，都为开发者提供了丰富的手段，以满足各种复杂的业务需求。