一、内建的 URL 类提供了用于创建和解析 URL 的便捷接口。
二、没有任何一个网络方法一定需要使用 URL 对象，字符串就足够了。
1、所以从技术上讲，我们并不是必须使用 URL。但是有些时候 URL 对象真的很有用。
三、万维网用url统一资源定位符标识分布因特网上的各种文档

创建 URL 对象

一、创建一个新 URL 对象的语法：

  1. new URL(url, [base])

1、url —— 完整的 URL，或者仅路径（如果设置了 base），
2、base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。

| 【示例】```javascript let url = new URL(‘https://javascript.info/profile/admin‘);

  1.  |
  2. | --- |
  4. | 【示例】下面这两个 URL 是一样的：```javascript
  5. let url1 = new URL('https://javascript.info/profile/admin');
  6. let url2 = new URL('/profile/admin', 'https://javascript.info');
  8. alert(url1); // https://javascript.info/profile/admin
  9. alert(url2); // https://javascript.info/profile/admin

| | —- |

| 【示例】根据相对于现有 URL 的路径轻松创建一个新的 URL：```javascript let url = new URL(‘https://javascript.info/profile/admin‘); let newUrl = new URL(‘tester’, url);

alert(newUrl); // https://javascript.info/profile/tester

 |
| --- |

二、URL 对象立即允许我们访问其组件，因此这是一个解析 url 的好方法

| 【示例】```javascript
let url = new URL('https://javascript.info/url');
alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url

| | —- |

三、URL 组件的备忘单：
image.png
1、href 是完整的 URL，与 url.toString() 相同
2、protocol 以冒号字符 : 结尾
3、search —— 以问号 ? 开头的一串参数
4、hash 以哈希字符 # 开头
5、如果存在 HTTP 身份验证，则这里可能还会有 user 和 password 属性：http://login:password@site.com（图片上没有，很少被用到）。

【示例】打印url
image.png
【示例2】打印window.location
image.png

四、我们可以将 URL 对象传递给网络（和大多数其他）方法，而不是字符串
1、我们可以在 fetch 或 XMLHttpRequest 中使用 URL 对象，几乎可以在任何需要 URL 字符串的地方都能使用 URL 对象。
2、通常，URL 对象可以替代字符串传递给任何方法，因为大多数方法都会执行字符串转换，这会将 URL对象转换为具有完整 URL 的字符串。

SearchParams “?…”

| 【示例】如果我们想要创建一个具有给定搜索参数的 url，例如：https://google.com/search?query=JavaScript。
1、我们可以在 URL 字符串中提供它们：```javascript new URL(‘https://google.com/search?query=JavaScript‘)

2、但是，如果参数中包含空格，非拉丁字母等（具体参见下文），参数就需要被编码。<br />3、有一个 URL 属性用于解决这个问题：url.searchParams，URLSearchParams 类型的对象。 |
| --- |

一、url.searchParams为搜索参数提供了简便的方法：

- 方法

1、append(name, value) ： 按照 name 添加参数，<br />2、delete(name) —— 按照 name 移除参数，<br />3、get(name) —— 按照 name 获取参数，<br />4、getAll(name) —— 获取相同 name 的所有参数（这是可行的，例如 ?user=John&user=Pete），<br />5、has(name) —— 按照 name 检查参数是否存在，<br />6、set(name, value) —— set/replace 参数，<br />7、sort() —— 按 name 对参数进行排序，很少使用，

- 并且它是可迭代的，类似于 Map。
| 【示例】包含空格和标点符号的参数的示例```javascript
let url = new URL('https://google.com/search');
url.searchParams.set('q', 'test me!'); // 添加带有一个空格和一个 ! 的参数
alert(url); // https://google.com/search?q=test+me%21
url.searchParams.set('tbs', 'qdr:y'); // 添加带有一个冒号 : 的参数
// 参数会被自动编码
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay
// 遍历搜索参数（被解码）
for(let [name, value] of url.searchParams) {
  alert(`${name}=${value}`); // q=test me!，然后是 tbs=qdr:y
}

| | —- |

编码（encoding）

一、RFC3986 标准定义了 URL 中允许哪些字符，不允许哪些字符。
二、那些不被允许的字符必须被编码，例如非拉丁字母和空格 —— 用其 UTF-8 代码代替，前缀为 %，例如 %20（由于历史原因，空格可以用 + 编码，但这是一个例外）。
三、URL 对象会自动处理这些。我们仅需提供未编码的参数，然后将 URL 转换为字符串：

// 在此示例中使用一些西里尔字符
let url = new URL('https://ru.wikipedia.org/wiki/Тест');
url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A

1、url 路径中的 Тест 和 ъ 参数都被编码了。
2、URL 变长了，因为每个西里尔字母用 UTF-8 编码的两个字节表示，因此这里有两个 %.. 实体（entities）。

编码字符串

一、在过去，在出现 URL 对象之前，人们使用字符串作为 URL。
二、而现在，URL 对象通常更方便，但是仍然可以使用字符串。
1、在很多情况下，使用字符串可以使代码更短。
2、如果使用字符串，则需要手动编码/解码特殊字符。
三、下面是用于编码/解码 URL 的内建函数：
1、encodeURI —— 编码整个 URL。
2、decodeURI —— 解码为编码前的状态。
3、encodeURIComponent —— 编码 URL 组件，例如搜索参数，或者 hash，或者 pathname。
4、decodeURIComponent —— 解码为编码前的状态。
四、encodeURIComponent 和 encodeURI 之间有什么区别？我们什么时候应该使用哪个？
1、区别
（1）encodeURI 仅编码 URL 中完全禁止的字符。
（2）encodeURIComponent 也编码这类字符，此外，还编码 #，$，&，+，,，/，:，;，=，? 和 @ 字符。
2、使用
（1）对于一个 URL 整体，我们可以使用 encodeURI：
（2）对于 URL 参数，我们应该改用 encodeURIComponent：

| 【示例】在 URL 中 :，?，=，&，# 这类字符是被允许的。```javascript https://site.com:8080/path/page?p1=v1&p2=v2#hash

1、对于 URL 的单个组件，例如一个搜索参数，则必须对这些字符进行编码，以免破坏 URL 的格式。 |
| --- |


| 【示例】URL 整体，可以用encodeURI```javascript
// 在 url 路径中使用西里尔字符
let url = encodeURI('http://site.com/привет');
alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82

URL 参数，用encodeURIComponent``javascript let music = encodeURIComponent('Rock&Roll'); let url =https://google.com/search?q=${music}`; alert(url); // https://google.com/search?q=Rock%26Roll

如，我们应该用encodeURIComponent编码在搜索参数中的 & 字符，否则，我们将得到 q=Rock&Roll —— 实际上是 q=Rock 加上某个晦涩的参数 Roll。不符合预期。 |
| --- |

五、encode* 与 URL 之间的编码差异<br />1、类 URL 和 URLSearchParams 基于最新的 URL 规范：[RFC3986](https://tools.ietf.org/html/rfc3986)，而 encode* 函数是基于过时的 [RFC2396](https://www.ietf.org/rfc/rfc2396.txt)。<br />2、它们之间有一些区别，例如对 IPv6 地址的编码方式不同：
```javascript
// IPv6 地址的合法 url
let url = 'http://[2607:f8b0:4005:802::1007]/';
alert(encodeURI(url)); // http://%5B2607:f8b0:4005:802::1007%5D/
alert(new URL(url)); // http://[2607:f8b0:4005:802::1007]/

1、encodeURI 替换了方括号 […]，这是不正确的，原因是：在 RFC2396 (August 1998) 时代，还不存在 IPv6 url。
2、这种情况很少见，encode* 函数在大多数情况下都能正常工作。