用途？
用于给url中的特殊字符进行编码。
为什么要用？
因为网络标准RFC1738做了硬性规定，只有字符和数字以及一些规定内的特殊符号，才可以不经过编码用于url，换言之就是，如果你的url中包含了规定之外的符号，那它就是非法的url, 无法被服务器解析，也就无法访问到你想要的网络资源。
为了解决这个问题，js就提供了encodeURI和encodeURIComponent来给这些规定之外的符号进行编码，这样，服务器就能正常解析并访问了。
用法？
encodeURI
encodeURI()会编码除去ASCII码、数字和~!@#$&*()=:/,;?+.-_'之外的所有字符。
const url = 'http://www.test.com/images/花朵.png'
const nextUrl = encodeURI(url)
// http://www.test.com/images/%E8%8A%B1%E6%9C%B5.pngencodeURIComponent
encodeURIComponent()会编码除去ASCII码、数字和~!*().-_'之外的所有字符。
const url = 'http://www.test.com/images/花朵.png'
const nextUrl = encodeURIComponent(url)
// http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png两者之间的差异
encodeURIComponent会进行编码的字符范围比encodeURI大。
两者之间如何选用
由于两者之间唯一的差异就是可被编码的字符范围，所以需要根据实际需要编码的字符做抉择。
情况1：
const url = 'http://www.test.com/images/花朵.png'
console.log(encodeURI(url));
http://www.test.com/images/%E8%8A%B1%E6%9C%B5.png
console.log(encodeURIComponent(url));
http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png通过上面的示例我们发现，由于encodeURIComponent的编码范围很广，如果对整个URL调用，会导致URL中有特殊作用的符号被编码，变成一个非法的URL了，也就无法访问了。所以此种情况应该选用encodeURI。
情况2：
const name = 'AT&T';
console.log(encodeURI(name));
// AT&T
console.log(encodeURIComponent(name));
// AT%26T由于encodeURI的编码范围较小，导致此处我们希望被编码的&并没有被编码。所以此种情况应该选用encodeURIComponent。
应用场景
场景1：
url参数中包含特殊字符
// 美国电话电报公司
const name = 'AT&T';
const url = `http://www.test.com?name=${name}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT输出的结果缺少了一部分，这是因为&是一个标准的url参数分割符，所以会被解析为分割符。虽然如此，但本例中的&符号是属于名字的一部分，我们不想让它被解析为url的参数分隔符。这时我们就可以使用encodeURIComponent对name的值进行编码，这样&就不会被识别为参数分割符了
// 美国电话电报公司
const name = 'AT&T';
const url = `http://www.test.com?name=${encodeURIComponent(name)}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT&T场景2：
将一个回调地址作为参数附加在另一个地址上
const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${redirectUrl}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success我们获取redirectUrl参数时，会发现num参数丢失了，这是因为&被当成www.test.com的参数分隔符了，这里我们可以使用encodeURIComponent来对redirectUrl进行编码就能解决这个问题。
const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${encodeURIComponent(redirectUrl)}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success&num=10疑问
现代浏览器会自动识别URL中的特殊字符并将其编码，那还需要我们手动调用encodeURI和encodeURIComponent吗？
答案是看情况，比如在参数中有中文的情况下，中文在URL中不会有歧义（中文在URL中不会有其它含义），所以浏览器会帮你完成编码，但是，在有些情况下，浏览器是不知道你是否需要编码的，我们拿前面的一个示例：
// 美国电话电报公司
const name = 'AT&T';这里的&在URL中有两种含义，一是作为参数分割符，二是作为普通的字符，这时，浏览器无法猜测你的意图，也就不会帮你自动编码了，所以，还是需要你主动调用encodeURIComponent。
注意事项
- 他们对特殊字符的编码形式是
utf-8