聊一聊JavaScript 中的 URL 对象(2)-木庄网络博客

Hostname 属性

使用hostname属性，可以从URL得到端口外的主机名：

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

你同样也可以像修改其他属性一样修改hostname属性，例如：

1	`exampleUrl.hostname = ‘newExample.com’;`

Href 属性

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

1 2	`const exampleUrl =` `new` `URL('https://www.grapecity.com.cn/developer/spreadjs#price');` `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属性也是可写属性，它能提取域名前的用户名和密码部分的内容，例如：

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

Pathname属性

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

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

Port属性

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

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

Protocol属性

可以获得传入Url地址参数的协议名，一般是指类似http:，https:，ftp:，file:等这样的协议。

1	`<p>const url =` `new` `URL('https://www.grapecity.com.cn/');<br>console.log(url.protocol);</p>`

Search属性

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

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

searchParams属性

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

1	`<p>const url =` `new` `URL（' https://www.grapecity.com.cn/?key1=value1&key2=value2'）; <br>console.log（url.searchParams.get（'key1'））; <br>console.log（url.searchParams.get（'key2'））;</p>`

从第一个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已经不再需要指向对应的文件的时候,就需要调用这个方法。

总结

最后为大家带来一张表，希望能更好的帮助大家通览