js对url进行编码解码的三种方式总结

雨点打透心脏的1/2处 2023-09-26 21:08 107阅读 0赞

![在这里插入图片描述][2b93048b3a5a4eee84aefd73492e36c8.png]

第一种：escape 和 unescape  
escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值

它的具体规则是，除了ASCII字母、数字、标点符号"@ \* \_ + - . /"以外，对其他所有字符进行编码。在u0000到u00ff之间的符号被转成%xx的形式，其余符号被转成%uxxxx的形式。对应的解码函数是unescape()。

还有两个点需要注意：

首先，无论网页的原始编码是什么，一旦被Javascript编码，就都变为unicode字符。也就是说，Javascipt函数的输入和输出，默认都是Unicode字符。这一点对下面两个函数也适用。  
其次，escape()不对 “+” 编码。但是我们知道，网页在提交表单的时候，如果有空格，则会被转化为+字符。服务器处理数据的时候，会把+号处理成空格。所以，使用的时候要小心。  
escape()编码：

const time = 2022-01-09  
const tile = ‘63元黑糖颗粒固饮’  
let url = “http://localhost:8080/index.html?time=”+escape(time)+“&title=”+escape(tile)  
地址栏显示结果：  
“http://localhost:8080/index.html?time=2022-01-09&title=63%u5143%u9ED1%u7CD6%u9897%u7C92%u56FA%u996E”  
unescape（）解码：

let url = “http://localhost:8080/index.html?time=”+unescape(2022-01-09)+“&title=”+unescape(63%u5143%u9ED1%u7CD6%u9897%u7C92%u56FA%u996E)  
地址栏显示结果：  
“http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮”

第二种：encodeURI 和 decodeURI  
encodeURI()是Javascript中真正用来对URL编码的函数。

它用于对URL的组成部分进行个别编码，除了常见的符号以外，对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , \#"，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%，，然后用十六进制的转义序列（形式为%xx）对生成的 1 字节、2 字节或 4 字节的字符进行编码。  
它对应的解码函数是decodeURI()

需要注意的是，它不对单引号’编码。

let url = “http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮”

encodeURI（）编码：  
let encodeURI\_url = encodeURI(url) = “http://localhost:8080/index.html?time=2022-01-09&title=63%E5%85%83%E9%BB%91%E7%B3%96%E9%A2%97%E7%B2%92%E5%9B%BA%E9%A5%AE”

decodeURI（）解码：  
decodeURI（encodeURI\_url ）= “http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮”

第三种：encodeURIComponent 和 decodeURIComponent  
与encodeURI()的区别是，它用于对整个URL进行编码。“; / ? : @ & = + $ , \#”，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。

它对应的解码函数是decodeURIComponent()。

let url = “http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮”

encodeURIComponent （）编码：  
let encodeURIComponent \_url = encodeURIComponent (url) = http%3A%2F%2Flocalhost%3A8080%2Findex.html%3Ftime%3D2022-01-09%26title%3D63%E5%85%83%E9%BB%91%E7%B3%96%E9%A2%97%E7%B2%92%E5%9B%BA%E9%A5%AE

decodeURIComponent（）解码：  
decodeURIComponent（encodeURIComponent \_url ）= “http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮”  
![在这里插入图片描述][6458214386af4432ab02c24186e2a548.png_pic_center]

[2b93048b3a5a4eee84aefd73492e36c8.png]: https://img-blog.csdnimg.cn/2b93048b3a5a4eee84aefd73492e36c8.png
[6458214386af4432ab02c24186e2a548.png_pic_center]: https://img-blog.csdnimg.cn/6458214386af4432ab02c24186e2a548.png#pic_center