URL 如何编码解码？为什么要编码？

为什么要编码？

URL 只能使用 ASCII 字符集来通过因特网进行发送。也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。
这意味着如果URL存在汉字，就必须编码后使用。

image.png

如上图所示，在浏览器中的 URL 所展现的样式包含有中文字符，但将这行 URL 复制粘贴时会发现，实际上的内容和你所看到的是不一样的。所以说 URL 编码只是针对非英文字母、阿拉伯数字和某些标点符号起作用的。

那么 URL 是如何编码的呢？？

URL 编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

首先需要把该字符的 ASCII 的值表示为两个16进制的数字，然后在其前面放置转义字符("%")，置入 URL 中的相应位置。(对于非 ASCII 字符, 需要转换为 UTF-8 字节序, 然后每个字节按照上述方式表示.)

例如说我们有这样一条 URL ：www.hahaha.com/你好?a=1&b=2，我们如何可以把它合法的在因特网中传播呢？？
使用 encodeURIComponent(str) 这个方法来将 utf-8 的字符编码为合法的 URL 。
上面的那条网址合法的传输形式为 window.encodeURIComponent('www.hahaha.com/你好?a=1&b=2') 。

image.png

想要解码的时候只需要使用decodeURIComponent(str)这个方法就可以解码你所得到的URL 。

image.png

JavaScript提供四个URL的编码/解码方法。
除了以上两种，还有decodeURI()解码和encodeURI()编码，区别是：

encodeURI方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!*()'

所以encodeURIComponent比encodeURI编码的范围更大。

实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。