如何使用 JavaScript 获取当前 URL？

获取当前 URL 是 Web 开发中一个非常常见的需求。在 JavaScript 中，我们可以通过 window.location 对象来获取当前 URL。下面是具体的代码实现。

获取当前 URL 的完整地址

如果我们想获取当前 URL 的完整地址，可以使用 window.location.href 属性。该属性返回一个字符串，该字符串包含当前的 URL。代码如下：

let fullUrl = window.location.href;
console.log(fullUrl);

返回的结果类似于以下内容：

https://www.example.com/path/to/page.html?param1=value1&param2=value2

获取当前 URL 的协议

如果我们想获取当前 URL 的协议，可以使用 window.location.protocol 属性。该属性返回一个字符串，该字符串表示当前 URL 使用的协议（如 http: 或 https:）。代码如下：

let protocol = window.location.protocol;
console.log(protocol);

返回的结果类似于以下内容：

https:

获取当前 URL 的主机名

如果我们想获取当前 URL 的主机名（不包括端口号），可以使用 window.location.hostname 属性。该属性返回一个字符串，该字符串表示当前 URL 的主机名。代码如下：

let hostname = window.location.hostname;
console.log(hostname);

返回的结果类似于以下内容：

www.example.com

获取当前 URL 的端口号

如果我们想获取当前 URL 的端口号，可以使用 window.location.port 属性。该属性返回一个字符串，该字符串表示当前 URL 使用的端口号（如果存在）。代码如下：

let port = window.location.port;
console.log(port);

如果当前 URL 使用默认端口（如 https://www.example.com 的默认端口为 443），则该属性返回空字符串。返回的结果类似于以下内容：

8080

获取当前 URL 的路径名

如果我们想获取当前 URL 的路径名（不包括主机名、参数和哈希部分），可以使用 window.location.pathname 属性。该属性返回一个字符串，该字符串表示当前 URL 的路径名。代码如下：

let pathname = window.location.pathname;
console.log(pathname);

返回的结果类似于以下内容：

/path/to/page.html

获取当前 URL 的查询参数

如果我们想获取当前 URL 的查询参数（即 GET 请求中 ? 后面的部分），可以使用 window.location.search 属性。该属性返回一个字符串，该字符串表示当前 URL 的查询参数（如果存在）。代码如下：

let search = window.location.search;
console.log(search);

如果当前 URL 没有查询参数，则该属性返回空字符串。返回的结果类似于以下内容：

?param1=value1&param2=value2

获取当前 URL 的哈希部分

如果我们想获取当前 URL 的哈希部分（即 # 后面的部分），可以使用 window.location.hash 属性。该属性返回一个字符串，该字符串表示当前 URL 的哈希部分（如果存在）。代码如下：

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

如果当前 URL 没有哈希部分，则该属性返回空字符串。返回的结果类似于以下内容：

#section1

以上就是使用 JavaScript 获取当前 URL 的全部方法。你可以根据自己的需求选择适当的方式来获取 URL 的不同部分。