JavaScript 怎样获取 URL 地址

在Web开发中，经常需要获取当前页面的URL地址或者操作URL的各个部分。JavaScript提供了多种方法来实现这一目的，下面我们就来详细了解一下。

1. 使用 window.location 对象

window.location 对象包含了当前页面的URL信息，通过它的不同属性，我们可以获取URL的各个部分。

• 获取完整的URL地址： 使用 window.location.href 可以获取当前页面的完整URL地址，包括协议、域名、路径、查询参数和哈希值等。例如：

var url = window.location.href;
console.log(url);

• 获取域名： window.location.host 属性返回URL的域名部分，包含主机名和端口号（如果有）。例如：

var host = window.location.host;
console.log(host);

• 获取路径： window.location.pathname 可以获取URL中的路径部分，不包括查询参数和哈希值。例如：

var path = window.location.pathname;
console.log(path);

2. 解析查询参数

如果URL中包含查询参数，我们可以使用 window.location.search 属性获取查询参数部分，然后使用一些方法来解析它们。例如：

var searchParams = new URLSearchParams(window.location.search);
var paramValue = searchParams.get('paramName');
console.log(paramValue);

3. 获取哈希值

哈希值通常用于页面内的锚点定位。使用 window.location.hash 可以获取URL中的哈希值部分。例如：

var hash = window.location.hash;
console.log(hash);

4. 修改URL地址

除了获取URL地址，我们还可以使用JavaScript来修改URL地址。例如，通过修改 window.location.href 的值，可以实现页面的跳转。

window.location.href = 'new-url.html';

通过上述方法，我们可以在JavaScript中方便地获取和操作URL地址，从而实现各种Web开发需求，如根据URL参数动态加载内容、实现页面跳转等。掌握这些技巧对于开发高质量的Web应用程序非常有帮助。