今天就来聊聊encodeURIComponent()、encodeURI()、decodeURIComponent()、decodeURI()这几个函数的用法和区别
对URL编码个解码？为什么会有这样的函数
- 一般说，url由一些英文字符、阿拉伯数字、某些特殊字符组成，不能使用其他的字符。如果有汉字组成的url就必须编码之后使用，这样的编码过程都交给了浏览器自身决定，但是不同的浏览器会有不同的编码方法，所以需要有统一的编码方式...所以这几个全局函数就起了作用！
全局函数encodeURIComponent()、encodeURI()
- 首先
encodeURIComponent()、encodeURI()都是用来编码 - 用法encodeURIComponent(URIstring)，encodeURI(URIstring)，对某些特殊字符进行十六进制的替换。
encodeURIComponent('http://baidu.com?a=12&b=12/12')
// http%3A%2F%2Fbaidu.com%3Fa%3D12%26b%3D12%2F12 全部'/'被编码，导致url地址无效
encodeURI('http://baidu.com?a=12&b=12/12')
// http://baidu.com?a=12&b=12/12 '/'没有被编码 导致后面的参数带有'/'的参数无法正确解析
-
encodeURIComponent()、encodeURI()区别
（1）encodeURI()，更多的是针对对整个URL进行编码，它不会对特殊字符（; / ? : @ & + =等 ）进行编码
（2）encodeURIComponent()是对'?'后面的参数进行编码，它会对一些特殊字符（; / ? : @ & = + $ , #等）进行编码
// 正确的做法
let param = encodeURIComponent('a=12&b=12/12')
console.log(`http://baidu.com?${param}`)
// http://baidu.com?a%3D12%26b%3D12%2F12
- 实用：
（1）浏览器在get请求过程中，会在url后面加上一些参数，这些参数中可能会有带有某些特殊的字符或者汉字。根据不同的网页编码(<meta http-equiv="Content-Type" content="text/html;charset=xxxx">)方式会有不同编码方式，在后台接受这些参数的时候，会造成混乱。
（2）js调用ajax发起请求，这个时候不同的浏览器发送的参数编码方式不尽相同
