在 Web 开发中，处理 URL 是一项常见的任务。无论我们需要提取 URL 的特定部分，还是为了导航而操作 URL，JavaScript 都提供了多种方法来访问和修改 URL 的各个部分。让我们一起探索这些不同的方法，来看看如何获取完整的 URL 及其各种组件。
以下是在 JavaScript 中获取 URL 及其组成部分的几种方法：
目录
- 使用
window.Location对象 - 使用
URL构造函数 - 对 URL 字符串使用
split()方法
使用 window.Location 对象
window.location 对象包含了关于当前文档 URL 的信息。它提供了各种属性来访问 URL 的不同部分。
语法：
window.location.href; // 完整的 URL
window.location.hostname; // 域名
window.location.pathname; // 路径名
window.location.protocol; // 协议 (http/https)
window.location.search; // 查询字符串
window.location.hash; // 片段标识符（锚点部分）
示例： 本示例使用 window.location 检索 URL 的不同部分。这对于访问当前网页的 URL 特别有用。
JavaScript
CODEBLOCK_0468cb96
输出：
!as输出结果
使用 URL 构造函数
INLINECODEf5118835 构造函数为在 JavaScript 中处理 URL 提供了一种更灵活的方式。我们可以创建一个新的 INLINECODEe7c729fe 对象，并从中提取各种组件。
语法：
let url = new URL(urlString);
url.href; // 完整的 URL
url.hostname; // 域名
url.pathname; // 路径名
url.protocol; // 协议
url.search; // 查询字符串
url.hash; // 片段标识符
示例： INLINECODEb8c47878 构造函数是一种解析 URL 字符串并提取其组件的灵活方式。它适用于当前窗口之外的 URL，这与仅适用于当前页面 URL 的 INLINECODE8a5ab891 不同。
JavaScript
CODEBLOCK_fe0fb704
输出
https://www.example.com:8080/page?name=John#section1
www.example.com
/page
https:
?name=John
#section1
对 URL 字符串使用 split() 方法
如果我们不需要像 INLINECODEc14874b4 或 INLINECODE1f69bcda 这样的对象的复杂性，可以使用简单的字符串操作方法 split() 来手动提取 URL 的不同部分。
语法：
urlString.split(delimiter); // 按分隔符分割 URL
示例： 此方法根据已知的分隔符（://, /, :）手动分割 URL 字符串以提取组件。这是一种在不使用任何内置对象的情况下获取 URL 部分的快速方法，尽管与其他方法相比，它的稳健性较差。
JavaScript
CODEBLOCK_060c6fe5
输出
https
www.example.com
8080
page?name=John#section1