URL API

概念与用法

URL 标准的大部分内容是关于 URL 的定义 及其结构和解析方式。此外，还涵盖了与网络上计算机寻址相关的各种术语的定义，并规定了解析 IP 地址和 DOM 地址的算法。对大多数开发者来说，更有趣的是 API 本身。

访问 URL 组件

为给定的 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。例如，要创建一个 URL 并设置其用户名

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

设置 username 的值不仅会设置该属性的值，还会更新整个 URL。执行上面的代码片段后，href 返回的值是 https://some-guy@example.com/login。对于任何可写属性，情况都是如此。

查询

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

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

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

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

接口

URL API 是一个简单的 API，只有少数几个接口

URL

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

URLSearchParams

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

示例

使用 URL API 解析 URL 参数

你可以通过将 URL 解析为字符串、按特定字符拆分或使用正则表达式来处理 URL 参数，但创建一个新的 URL 对象来处理会更容易。下面的示例从 document.location.href 获取文档 URL，使用 URLSearchParams.sort() 对参数进行排序，然后使用 URLSearchParams.keys 提取键。

对于文档 URL 中的每个键，我们向一个 <table> 元素添加行，每个找到的参数键对应一行，第一列包含键的名称，第二列包含值。

const table = document.querySelector(".param-table");

const url = new URL(document.location.href);
url.searchParams.sort();
const keys = url.searchParams.keys();

for (let key of keys) {
  let val = url.searchParams.get(key);
  let row = document.createElement("tr");
  let cell = document.createElement("td");
  cell.innerText = key;
  row.appendChild(cell);
  cell = document.createElement("td");
  cell.innerText = val;
  row.appendChild(cell);
  table.appendChild(row);
}

你可以尝试 此示例的在线版本 并 在 GitHub 上查看完整的源代码。

规范

浏览器兼容性

api.URL

api.URLSearchParams

另见

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