URL
Baseline 广泛可用 *
注意：此功能在 Web Workers 中可用。
URL 接口用于解析、构建、规范化和编码 URL。它通过提供允许您轻松读取和修改 URL 组件的属性来工作。
您通常通过在其构造函数调用时将 URL 指定为字符串，或者通过提供相对 URL 和基础 URL 来创建新的 URL 对象。然后，您可以轻松读取 URL 的解析组件或进行修改。
构造函数
URL()-
根据 URL 字符串和可选的基础 URL 字符串创建并返回一个
URL对象。如果传入的参数未定义有效的 URL，则会抛出错误。
实例属性
哈希-
一个包含
'#'字符后跟 URL 的片段标识符的字符串。 主机-
一个包含域（即主机名），后跟（如果指定了端口）一个
':'和 URL 的端口的字符串。 hostname-
一个包含 URL 域的字符串。
href-
一个 字符串化器，返回一个包含整个 URL 的字符串。
origin只读-
返回一个包含 URL 来源的字符串，即其协议、域名和端口。
密码-
一个字符串，包含在域名之前指定的密码。
pathname-
一个包含初始
'/'字符后跟 URL 的路径的字符串，不包括查询字符串或片段。 port-
一个包含 URL 端口号的字符串。
协议-
一个包含 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");
}
可以设置 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 |
浏览器兼容性
加载中…