URL
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
URL
接口用于解析,构造,规范化和编码 URL。它通过提供允许你轻松阅读和修改 URL 组件的属性来工作。通常,通过在调用 URL 的构造函数时将 URL 指定为字符串或提供相对 URL 和基本 URL 来创建新的 URL 对象。然后,你可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。
如果浏览器尚不支持URL()
构造函数,则可以使用Window
中的Window.URL
属性。确保检查你的任何目标浏览器是否要求对此添加前缀。
备注: 此特性在 Web Worker 中可用。
构造器
new URL()
-
创建并返回一个
URL
对象,该 URL 对象引用使用绝对 URL 字符串,相对 URL 字符串和基本 URL 字符串指定的 URL。
属性
hash
-
包含
'#'
的USVString
,后跟 URL 的片段标识符。 host
-
一个
USVString
,其中包含域(即主机名),后跟(如果指定了端口)“:”和 URL 的端口。 hostname
-
包含 URL 域名的
USVString
。 href
-
包含完整 URL 的
USVString
。 origin
只读-
返回一个包含协议名、域名和端口号的
USVString
。 password
-
包含在域名前面指定的密码的
USVString
。 pathname
-
以 '/' 起头紧跟着 URL 文件路径的
DOMString
。 port
-
包含 URL 端口号的
USVString
。 protocol
-
包含 URL 协议名的
USVString
,末尾带':'
。 search
-
一个
USVString
,指示 URL 的参数字符串;如果提供了任何参数,则此字符串包括所有参数,并以开头的“?”开头 字符。 searchParams
只读-
URLSearchParams
对象,可用于访问search
中找到的各个查询参数。 username
-
包含在域名前面指定的用户名的
USVString
。
方法
toString()
toJSON()
-
返回包含整个 URL 的
USVString
。它返回与href
属性相同的字符串。
静态方法
createObjectURL()
-
返回一个
DOMString
,包含一个唯一的 blob 链接(该链接协议为以 blob:,后跟唯一标识浏览器中的对象的掩码)。 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'));
规范
Specification |
---|
URL Standard # url |
浏览器兼容性
BCD tables only load in the browser
参见
core-js
中针对URL
的 polyfill- URL API
- 什么是 URL?
- 获取
URL
对象的属性:URL
URLSearchParams