第二个参数是可选参数，只有当第一个参数是相对地址时才应传入。我们传入的字符串或 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/developer/spreadjs#price'); console.log(exampleUrl.hash);

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

exampleUrl.hash = '#newHash';

例如：

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

我们通过 href 属性就能获得更新后的 URL https://www.grapecity.com.cn/developer/spreadjs#newHash

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/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 属性也是可写属性，它能提取域名前的用户名和密码部分的内容，例如：

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/?key1=value1&key2=value2'）; 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 部分。

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

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