URL - 用于解析，构造，规范化和编码 URL

URL 接口用于解析，构造，规范化和编码 URL。它通过提供允许您轻松阅读和修改 URL 组件的属性来工作。通常，您可以通过在调用其构造函数时将 URL 指定为字符串，或通过提供相对 URL 和基本 URL 来创建新的 URL 对象。然后，您可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。

如果浏览器尚不支持 URL() 构造函数，则可以使用 Window 接口的 Window.URL 属性。但是要确保检查您的目标浏览器是否需要加上前缀才能调用。

构造函数

new URL()

创建并返回一个 URL 对象，该对象表示使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。

属性

hash

一个 USVString，以 '#' 开头，后面紧跟着 URL 的片段标识符。

host

一个 USVString，包含域名（即 hostname），如果包含了端口，后面跟着一个 ':' 和 port。

hostname

一个 USVString，包含 URL 的域名。

href

一个 USVString，包含了整个 URL。

origin 只读

返回一个 USVString，其中包含 URL 的来源，即 URL 的协议，域名和端口。

password

一个 USVString，其中包含在域名之前指定的密码。

pathname

一个 USVString，以 '/' 开头，后面紧跟着 URL 的路径。

port

一个 USVString，包含 URL 的端口号。

protocol

一个 USVString，包含 URL 的协议方案，包括了最后的 ':'。

search

一个 USVString，包含了 URL 的参数字符串；如果 URL 有任何参数，则此字符串包括所有参数，并以开头的 '?' 字符开头。

searchParams 只读

一个 URLSearchParams 对象，可用于访问在 search 中找到的各个查询参数。

username

一个 USVString，其中包含在域名之前指定的用户名。

方法

toString()

返回一个 USVString，包含了整个 URL。它是 URL.href 的同义词，尽管它不能用于修改值。

toJSON()

返回一个 USVString，包含了整个 URL 。它返回与 href 属性相同的字符串。

静态方法

createObjectURL()

返回一个 DOMString，包含唯一的 blob URL，即以 blob: 作为协议的 URL，后跟一个字符串，该字符串在浏览器中是唯一的。

revokeObjectURL()

撤消先前使用 URL.createObjectURL() 创建的对象 URL。

使用注意

如果 url 参数是相对 URL，则构造函数将使用 url 参数和可选的 base 参数作为基础：

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

可以设置 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'));

规范

规范	状态	备注
File API URL 的定义	工作草案	添加了静态方法 URL.createObjectURL() 和 URL.revokeObjectURL()。
URL API 的定义	现行的标准	初始定义（实现 URLUtils）。

桌面浏览器兼容性

移动浏览器兼容性

1. 在版本 57 之前，Firefox 有一个错误，即通过 URL API 进行访问时，URL 中包含的单引号会被转义（请参见 bug 1386683）。

2. 要从 chrome 代码，JSM 和 Bootstrap 范围使用它，必须使用 Cu.importGlobalProperties(['URL']); 导入它。

3. 必须从 URL 模块导入。

4. createObjectURL() 在 ServiceWorker 的上下文中不再可用。

5. 如果基础对象未设置内容类型，则将此 URL 用作 img 标记的 src 会间歇性失败，并显示错误 DOM7009。

6. 使用 blob 协议的 URL 结果错误地返回 null。

7. pathname 和 search 返回了 URL 的错误部分。例如，对于 http://z.com/x?a=true&b=false 的网址，pathname 将返回 "/x?a=true&b=false"，search 将返回 ""，而不是分别返回 "/x" 和 "?a=true&b=false"。

8. revokeObjectURL() 在 ServiceWorker 的上下文中不再可用。

相关链接

• URL 接口
• 什么是 URL？
• 获得 URL 对象的属性：Window.URL。
• URLSearchParams.