不要再造轮子了：聊一聊 JavaScript 的 URL 对象是什么？

第二个参数是可选参数，只有当第一个参数是相对地址时才应传入。咱们传入的字符串或URL对象被转换为USVString对象，该对象对应于一组Unicode标量值可能的序列集合。在咱们的代码中，咱们能够将它们视为常规字符串。若是两个参数都是相对地址，或者基础URL和相对地址一块儿无效，则会抛出TypeError异常。咱们能够直接将URL对象传递给第二个参数，由于URL对象的toString方法将在构造函数中操做以前将URL对象转换为完整的URL字符串。

URL对象能够具备如下属性：

Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等属性，接下来，让咱们一块儿来了解一下它们吧！

Hash属性

hash属性能得到URL中位于#号后的部分。因为字符串没有通过百分比解码，所以仍然对以下所示的特殊符号进行编码。它们使用下面的映射进行编码。在编码过程当中，左侧的字符将转换为右侧的字符：

‘:’ — %3A
‘/’ — %2F
‘?’ — %3F
‘#’ — %23
‘[‘ — %5B
‘]’ — %5D
‘@’ — %40
‘!’ — %21
‘$’ — %24
“‘“ — %27
‘(‘ — %28
‘)’ — %29
‘*’ — %2A
‘+’ — %2B
‘,’ — %2C
‘;’ — %3B
‘=’ — %3D
‘%’ — %25
‘ ‘ — %20 或者 +

例如，咱们有这样的URL字符串，https://www.grapecity.com.cn/developer/spreadjs#price，而后咱们能够直接取出Hash属性值，以下所示：

const exampleUrl = new URL('https://www.grapecity.com.cn/...');
console.log(exampleUrl.hash);

在运行结果中，咱们在console.log语句中获得‘#price’。该属性是一个USVString，当咱们像上面那样获取它时，它会被转换为字符串。由于它不是只读属性，因此咱们也能够像下面的代码中那样直接为它赋值：

exampleUrl.hash = '#newHash';

例如：

const exampleUrl = new URL（'https://www.grapecity.com.cn/...'）;
exampleUrl.hash ='#newPrice';
console.log（exampleUrl.hash）;

咱们经过href属性就能得到更新后的URL https://www.grapecity.com.cn/...

Host 属性

URL对象的host属性是包含主机名的USVString。若是端口包含在: 以后，则咱们还将得到主机的端口号。例如，若是咱们有：

const exampleUrl = new URL('http://huozige.grapecity.com.cn:8080/');
console.log(exampleUrl.host);

咱们就能得到huozige.grapecity.com.cn:8080。与其余USVString属性同样，当咱们检索它时，它会转换为字符串。一样的，它也不是只读属性，因此咱们也能够像hash属性同样为它赋值：

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功能演示');
exampleUrl.host = 'es.grapecity.com.cn:80';
console.log(exampleUrl);

这样咱们同样可以得到全新的URL。

Hostname 属性

使用hostname属性，能够从URL获得端口外的主机名：

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功能演示');
console.log(exampleUrl.hostname)

你一样也能够像修改其余属性同样修改hostname属性，例如：

exampleUrl.hostname = ‘newExample.com’;

Href 属性

URL对象的href属性包含了传入URL对象的整个地址字符串，例如：

const exampleUrl = new URL('https://www.grapecity.com.cn/...');
console.log(exampleUrl.href);

打出来的就是咱们传给URL构造函数的内容，和其余属性同样，href属性也不是只读的。

Origin 属性

区别于其余属性，Origin是一个只读属性，它将为你返回具备URL来源的Unicode序列化USVString。Origin的结构是由传入的URL类型决定的，对于http或https 的连接，获得的Origin将会为协议（http/https）+ (://) + 域名 + (:端口)，通常状况下，默认端口将会被忽略。对于BLOB 连接，Origin返回的则是BLOB：后面的部分。例如：

const url1 = new URL("https://www.grapecity.com.cn/:443")
const url2 = new URL("blob:https://www.grapecity.com.cn/:443")
console.log(url1.origin);
console.log(url2.origin)

你将会获得

https://www.grapecity.com.cn

UserName & Password属性

UserName和Password属性也是可写属性，它能提取域名前的用户名和密码部分的内容，例如：

const url = new URL('https://username:password@www.grapecity.com.cn');
console.log(url.username);
console.log(url.password);
url.username = “username1”;
url.password = “password1”;
console.log(url.username);
console.log(url.password);

Pathname属性

这个属性是指得到传入url的第一个斜杠(/) 后面除参数外的部分，例如：

const url = new URL ("https://www.grapecity.com.cn/developer/spreadjs#price")
console.log(url.pathname);

Port属性

Port属性是指能够得到传入Url地址的端口值，这个属性也是可写的。

const url = new URL('http://huozige.grapecity.com.cn:8080/功能演示');
console.log(url.port);

Protocol属性

能够得到传入Url地址参数的协议名，通常是指相似http:，https:，ftp:，file:等这样的协议。

const url = new URL('https://www.grapecity.com.cn/');
console.log(url.protocol);

Search属性

能够得到传入Url地址参数？后的部分，但该属性只能得到整个查询字符串，如若须要了解各个参数的值，可使用searchParams属性。

const url = new URL('https://www.grapecity.com.cn:443?key1=value1&key2=value2');
console.log(url.search);

searchParams属性

search属性只为咱们获取了整个参数字符串，若是有把字符串解析为键值对，这时候searchParams属性就派上了用场，该属性将得到一个URLSearchParams对象，该对象具备列出查询字符串键值对列表的能力，例如，要获取参数列表，咱们能够这样使用。

const url = new URL（' https://www.grapecity.com.cn/...'）;
console.log（url.searchParams.get（'key1'））;
console.log（url.searchParams.get（'key2'））;

从第一个console.log语句中得到value1，从第二个console.log语句中得到value2。URLSearchParams对象有一个get方法，经过键名获取给定查询字符串键的值。

静态方法

URL构造函数里有2个静态方法，它有createObjectURL()方法和revokeObjectURL()方法。

URL.createObjectURL()静态方法会建立一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和建立它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

URL.revokeObjectURL()方法会释放一个经过URL.createObjectURL()建立的对象URL. 当你要已经用过了这个对象URL,而后要让浏览器知道这个URL已经再也不须要指向对应的文件的时候,就须要调用这个方法。

总结

最后为你们带来一张表，但愿能更好的帮助你们通览

有了URL对象，操纵和从URL中提取部分再也不是一件痛苦的事情，由于咱们没必要本身编写全部代码来完成这项工做。大多数浏览器的标准库中都内置了URL对象。如今咱们能够将URL做为字符串传递给URL构造函数并建立URL的实例。而后，咱们可使用方便的值属性和方法来操做并得到咱们想要的URL部分。

最后，有什么问题，欢迎直接留言。