URL

JS中的URL对象

构造函数: new URL()

用于创建一个URL对象, 接收两个参数, url和base

• url: 必选参数, 一个绝对或相对路径
• base: 可选参数, 作为URL对象的基础路径(放在该URL前面)
  • String: 如果base是一个字符串, 则会把base和url做一个URL的拼接
  • Object: 如果是一个URL对象, 则会把base代表的url提取出来, 然后拼接成一个新的URL对象

如果传入的参数无法组成一个有效的URL, 那个么就会报错
因为url不区分大小写, 所以使用URL创建的url全部会转换为小写

示例代码

var url = new URL('https://www.google.com'); // => https://www.google.com
var url_1 = new URL('?q=url', 'https://www.google.com'); // => https://www.google.com?q=url
var url_2 = new URL('?q=url', url); // => https://www.google.com?q=url

属性

协议: protocol

常见的协议就是http(https), 或file, 不同的URL可能有不同的协议
URL对象的protocol属性返回代表该url的协议的字符串

(new URL('http://www.google.com')).protocol; // => http
(new URL('https://www.google.com')).protocol; // => https
(new URL('c:\\system\\user')).protocol; // => file

主机: host和hostName

host和hostName可以用于获取一个URL的主机, 两者的区别在于, hostName仅仅返回主机名, 而host可以获取主机名加端口号

(new URL('http://www.google.com')).host; // => www.google.com
(new URL('http://www.google.com')).hostName; // => www.google.com
(new URL('http://localhost:8080')).hostName; // => localhost:8080
(new URL('http://localhost:8080')).hostName; // => localhost

端口: prot

前面的host属性可以获取到主机名和端口号, 那个如果只是希望获取端口, 就可以使用prot属性了

(new URL('http://localhost:8080')).prot; // => 8080

目标地址: href

href会返回一个URL对象实际执行的目标地址的字符串

(new URL('http://www.google.com')).href; // => http://www.google.com

路径: path

url的路劲就是紧跟host之后类似于/a/b这样的字符串

(new URL('http://localhost:8080/person/man')).path; // => /person/man

参数:search

参数就是紧跟path之后, 由?开头的字符串, 多个参数使用&分隔开
参数使用的是key=value这样的键值对, key就是参数名, value就是参数的值了

(new URL('http://localhost:8080/person/man?q=url&land=cn')).path; // => ?q=url&land=cn

哈希值: hash

哈希值就是在search之后, 由#开头的字符串, 知道结尾

(new URL('http://localhost:8080/person/man?q=url&land=cn#url')).hash; // => #url

origin

origin属性包括了协议, 主机(如果有端口号包括端口号)

所有属性可读可写, 一个有效的url必须包含协议和主机

函数

createObjectURL

用于创建可以访问一个File或Blob等对象资源的URL字符串

var fileUrl = URL.createObjectURL(file);
var blobUrl = URL.createObjectURL(blob);

revokeObjectURL

用于使一个createObjectURL创建的url失效

var url = URL.reateObjectURL(file); // url有效
URL.revokeObjectURL(url); // url失效