URL

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

如果浏览器尚不支持URL()构造函数,则可以使用Window中的Window.URL属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。

Note: 此特性在 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()
返回包含整个URL的USVString。 它是URL.href的同义词,尽管它不能用于修改值。
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 Status Comment
File API
URL
Working Draft Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
URL
Node
Living Standard Initial definition (implements URLUtils).

浏览器兼容性

BCD tables only load in the browser

相关链接