web API学习之URL

URL 接口提供了用于操作URL的相关方法，通过该接口，可以创建URL，获取或更改URL的host、search、hash等，URL还能自动对URL中的组件进行编码。

URL的组成

以如下URL为示例：

<code>http://zhangsan:[email protected]:8080/doc/note?id=88&name=first#h1/<code>

URL细分为

• protocol: 协议，即 http: 部分
• username: 用户名，即 zhangsan 部分
• password：用户名对应的密码，即 password 部分
• hostname: 主机名称，即 example.com 部分
• port: 端口号，即 8080
• pathname:
  路径名，即 /doc/note 部分
• search: 查询字符串，即 ?id=8&name=first 部分
• hash：哈希部分，即 #h1 。

其中，

• hostname与port 合称为 host ,即 example.com:8080
• protocol + // + host 合称为 origin ,即 http://example.com:8080
• 所有部分组成了 href ,即

<code>http://zhangsan:[email protected]:8080/doc/note?id=88&name=first#h1/<code>

构造函数

可以通过 URL 构造函数创建一个URL对象,语法如下：

<code>url = new URL(url, [base])/<code>

构造函数有两个参数：

• url : 必选参数，为一个绝对 url 或者相对 url 。 URL 构造函数对根据传入的url参数构建一个 URL 对象。
• base : 可选参数，如果第一个参数是相对 url ，则需要传入此参数用作相对 url 的 baseURL 。

传入绝对 url

<code>var url = new URL('http://example.com:8080/doc/note?id=88&name=first#h1');/<code>

传入相对 url

使用相对 url 时，第一个参数可以传入类似 /a

• 以 / 开头，表示绝对路径

<code>var url = new URL('/user', 'http://baidu.com/doc/list');
console.log(url.href) // http://baidu.com/user/<code>

• 以 ./ 或 ../ 开头表示相对最后一级路径的位置

<code>var url = new URL('./user', 'http://baidu.com/doc/list');
console.log(url.href) // http://baidu.com/doc/user

var url = new URL('../user', 'http://baidu.com/doc/list/v1');
console.log(url.href) // http://baidu.com/doc/user

var url = new URL('../../user', 'http://baidu.com/doc/list/v1');
console.log(url.href) // http://baidu.com/user/<code>

• 传入相对当前协议的 url

<code>var url = new URL('//kuaishou.com', 'http://baidu.com/doc/list/v1');
console.log(url.href) // http://kuaishou.com/<code>

实例属性

对应URL的各组成部分，一个URL实例共有12个属性：

1. protocol: 协议，如 http: 或 https:
2. username: 用户名
3. password: 密码
4. hostname: 主机名, 如 example.com
5. port: 端口号, 如 8080
6. host: 主机名+端口号, 如 example.com:8080
7. origin: 协议+主机名+端口号，如 http://example.com:8080
8. pathname: 路径，如 /doc/list
9. search: 查询参数,如 ?id=8
10. hash
    : 哈希部分，如 #h1
11. href: url的完整表示，如 http://example.com:8080/doc?id=5#h1
12. searchParams: 一个表示查询参数的 SearchParams 对象，可以用来操作查询参数。

运行如下代码可以看到对应的属性值

<code>var url2 = new URL('http://zhangsan:[email protected]:8080/doc/note?id=88&name=first#h1');/<code>

如下图：

URL实例

实例方法

• toString() : 返回完整的url，与 url.href 相同。
• toJSON() : 和 toString() 返回值相同

静态方法

• createObjectURL(object) : 该方法接收一个 Blob 对象或 File 对象，然后生成一个字符串URL，代表该对象。当创建该对象的window关闭后，该URL对象会被释放。
• revokeObjectURL(url) : 手动释放通过 createObjectURL() 创建的URL。

注意点

• 如果对 URL 对象的 pathname 、 search 和 hash 赋值，URL会自动对输入的值进行编码。

<code>var url = new URL('http://baidu.com/a/b')
url.pathname = '给我编码'
console.log(url.pathname)
"/%E7%BB%99%E6%88%91%E7%BC%96%E7%A0%81"/<code>

• 如果浏览器没有实现URL对象，可以使用 window.URL

閱讀更多 一起學前端 的文章

關鍵字: 学习 Origin