URL API

URL 标准的大部分内容都包含在URL 的定义以及它的结构和解析方式中。它还涵盖了与网络上计算机寻址相关的各种术语的定义，并指定了用于解析 IP 地址和 DOM 地址的算法。对大多数开发人员来说，更感兴趣的是 API 本身。

为给定 URL 创建URL对象会解析该 URL，并通过其属性提供对其组成部分的快速访问。

let addr = new URL("https://mdn.org.cn/en-US/docs/Web/API/URL_API");
let host = addr.host;
let path = addr.pathname;

上面的代码片段为您正在阅读的这篇文章创建了一个URL对象，然后获取host和pathname属性。在本例中，这些字符串分别为developer.mozilla.org和/en-US/docs/Web/API/URL_API。

URL的大多数属性都是可设置的；您可以向其写入新值以更改对象表示的 URL。例如，要创建一个 URL 并设置其用户名

let myUsername = "someguy";
let addr = new URL("https://example.com/login");
addr.username = myUsername;

设置username的值不仅会设置该属性的值，还会更新整个 URL。在执行上面的代码片段后，href返回的值为https://[email protected]/login。对于任何可写属性，情况都是如此。

URL上的search属性包含 URL 的查询字符串部分。例如，如果 URL 为https://example.com/login?user=someguy&page=news，则search属性的值为?user=someguy&page=news。您还可以使用URLSearchParams对象的get()方法查找单个参数的值

let addr = new URL("https://example.com/login?user=someguy&page=news");
try {
  loginUser(addr.searchParams.get("user"));
  gotoPage(addr.searchParams.get("page"));
} catch (err) {
  showErrorMessage(err);
}

例如，在上面的代码片段中，用户名和目标页面是从查询中获取的，并传递给网站代码用于登录和将用户路由到网站内所需目的地的相应函数。

URLSearchParams中的其他函数允许您更改键的值、添加和删除键及其值，甚至对参数列表进行排序。

URL API 非常简单，只有几个接口

URL

可用于解析、构建、规范化和编码URL。

URLSearchParams

定义用于处理 URL 查询字符串的实用程序方法。

如果您想处理 URL 中包含的参数，您可以手动执行此操作，但创建URL对象来为您执行此操作要容易得多。下面的fillTableWithParameters()函数以HTMLTableElement对象作为输入，该对象表示一个<table>。为每个在参数中找到的键添加一行到表中，第一列包含键的名称，第二列包含值。

请注意对URLSearchParams.sort()的调用，以便在生成表格之前对参数列表进行排序。

function fillTableWithParameters(tbl) {
  const url = new URL(document.location.href);
  url.searchParams.sort();
  const keys = url.searchParams.keys();

  for (const key of keys) {
    const val = url.searchParams.get(key);
    const row = document.createElement("tr");
    const cell1 = document.createElement("td");
    cell1.innerText = key;
    row.appendChild(cell1);
    const cell2 = document.createElement("td");
    cell2.innerText = val;
    row.appendChild(cell2);
    tbl.appendChild(row);
  }
}

此示例的工作版本可以在Glitch 上找到。加载页面时只需将参数添加到 URL 中即可在表格中查看它们。例如，尝试https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable。

• Fetch API
• CSS <url>() 类型
• encodeURI()
• encodeURIComponent()