URL

注意：此功能在Web Workers中可用。

URL 接口用于解析、构造、规范化和编码URL。它通过提供属性来轻松读取和修改 URL 的组件来工作。

通常，您可以通过在调用其构造函数时将 URL 指定为字符串，或通过提供相对 URL 和基本 URL 来创建一个新的 URL 对象。然后，您可以轻松读取 URL 的已解析组件或对 URL 进行更改。

构造函数

URL(): 从 URL 字符串和可选的基本 URL 字符串创建并返回一个 URL 对象。如果传递的参数未定义有效的 URL，则抛出异常。

实例属性

hash: 包含 '#' 后跟 URL 的片段标识符的字符串。
host: 包含域（即主机名）后跟（如果指定了端口）':' 和 URL 的端口的字符串。
hostname: 包含 URL 域的字符串。
href: 一个字符串化器，它返回包含整个 URL 的字符串。
origin 只读: 返回包含 URL 来源的字符串，即其方案、其域及其端口。
password: 包含在域名之前指定的密码的字符串。
pathname: 包含初始 '/' 后跟 URL 路径的字符串，不包括查询字符串或片段。
port: 包含 URL 端口号的字符串。
protocol: 包含 URL 的协议方案的字符串，包括最后的 ':'。
search: 指示 URL 参数字符串的字符串；如果提供了任何参数，则此字符串包含所有参数，从开头的 ? 字符开始。
searchParams 只读: 一个URLSearchParams 对象，可用于访问在 search 中找到的各个查询参数。
username: 包含在域名之前指定的用户名字符串。

静态方法

canParse(): 返回一个布尔值，指示从 URL 字符串和可选的基本 URL 字符串定义的 URL 是否可解析且有效。
createObjectURL(): 返回包含唯一 blob URL 的字符串，即以 blob: 作为其方案的 URL，后跟唯一标识浏览器中对象的字符串。
parse(): 从 URL 字符串和可选的基本 URL 字符串创建并返回一个 URL 对象，或者如果传递的参数定义了无效的 URL 则返回 null。
revokeObjectURL(): 撤销先前使用URL.createObjectURL()创建的对象 URL。

实例方法

toString(): 返回包含整个 URL 的字符串。它是URL.href的同义词，尽管它不能用于修改值。
toJSON(): 返回包含整个 URL 的字符串。它返回与 href 属性相同的字符串。

使用说明

构造函数采用 url 参数，以及一个可选的 base 参数，如果 url 参数是相对 URL，则将其用作基准。

const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

如果无法将 URL 解析为有效的 URL，则构造函数将引发异常。您可以在try...catch 块中调用上述代码，或者使用canParse() 静态方法首先检查 URL 是否有效。

if (URL.canParse("../cats", "http://www.example.com/dogs")) {
  const url = new URL("../cats", "http://www.example.com/dogs");
  console.log(url.hostname); // "www.example.com"
  console.log(url.pathname); // "/cats"
} else {
  console.log("Invalid URL"); //Invalid URL
}

URL 属性可以设置为构造 URL。

url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"

URL 按照RFC 3986中找到的规则进行编码。例如

url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

URLSearchParams 接口可用于构建和操作 URL 查询字符串。

要从当前窗口的 URL 获取搜索参数，您可以执行以下操作

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

URL 的toString() 方法仅返回href 属性的值，因此构造函数可用于直接规范化和编码 URL。

const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);

规范

规范
URL 标准 # url

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。