概述
前端經(jīng)常需要對(duì)放入url中的參數(shù)進(jìn)行編碼和解碼，js原生提供了兩組編碼和解碼的函數(shù)，分別為encodeURIComponent與decodeURIComponet邑狸，encodeURI與decodeURI懈糯，這兩組函數(shù)有什么區(qū)別和不同的應(yīng)用場(chǎng)景呢？我自己經(jīng)常會(huì)混淆单雾，最近又遇到這些問(wèn)題赚哗，因此自己去嘗試了一些demo，并記錄下來(lái)硅堆，讓自己徹底搞明白屿储；
共同點(diǎn)
這兩組函數(shù)都是js的全局函數(shù)，encodeURI()和encodeURIComponent()方法可以對(duì)URI (Uniform ResourceIdentifiers渐逃，通用資源標(biāo)識(shí)符)進(jìn)行編碼够掠，以便發(fā)送給瀏覽器。有效的URI中不能包含某些字符茄菊，例如空格疯潭、+、/等面殖。而這URI編碼方法就可以對(duì)URI進(jìn)行編碼竖哩，它們用特殊的UTF-8編碼替換所有無(wú)效的字 符，從而讓瀏覽器能夠接受和理解脊僚。編碼函數(shù)都不會(huì)對(duì)?ASCII碼字母相叁、數(shù)字、特定標(biāo)點(diǎn)符號(hào)【- _ . ! ~ * ' ( ) 等等】?進(jìn)行編碼辽幌，對(duì)其保持原型增淹。
對(duì)應(yīng)的decodeURI()和decodeURIComponent()則是對(duì)編碼的URI進(jìn)行解碼，以得到原始的URI乌企。
不同點(diǎn)
encodeURI()不會(huì)對(duì)在 URI 中具有特殊含義的 ASCII 標(biāo)點(diǎn)符號(hào)【如 , / ? : @ & 空格 = + $ # 等等】進(jìn)行編碼埠通，還是保持原形；但是會(huì)對(duì)%編碼逛犹，因?yàn)?code>%比較特殊端辱，它是瀏覽器中十六進(jìn)制表示關(guān)鍵字梁剔，比如+對(duì)應(yīng)%2B，如果你的原始URI中有%舞蔽，encodeURI會(huì)對(duì)其進(jìn)行轉(zhuǎn)義荣病。
函數(shù)ecodeURIComponent(str) 會(huì)對(duì)這些符號(hào)進(jìn)行編碼，編碼成由一個(gè)或多個(gè)十六進(jìn)制的轉(zhuǎn)義序列表示渗柿。
ecodeURIComponent(str)假定它的入?yún)⑹?URI 的一部分（比如協(xié)議个盆、主機(jī)名、路徑或查詢(xún)字符串）朵栖。因此 encodeURIComponent() 函數(shù)將轉(zhuǎn)義用于分隔 URI 各個(gè)部分的標(biāo)點(diǎn)符號(hào)颊亮。
一般用法
如果需要編碼整個(gè)URL，然后使用這個(gè)URL陨溅，用encodeURI
當(dāng)只需要編碼URL中的參數(shù)時(shí)终惑，用encodeURIComponent
示例
demo1
> var url = "http://www.baidu.com/list?p=a+b+c"
> encodeURI(url)
"http://www.baidu.com/list?p=a+b+c"
> encodeURIComponet(url)
"http%3A%2F%2Fwww.baidu.com%2Flist%3Fp%3Da%2Bb%2Bc"
可以看出encodeURIComponet()方法吧url中的/、?以及+都轉(zhuǎn)義了门扇，而encodeURI()方法沒(méi)有改變雹有；
demo2
> var url = "%+/$#;"
> encodeURI(url)
"%25+/$#;"
> encodeURIComponet(url)
"%25%2B%2F%24%23%3B"
%也被encodeURI函數(shù)轉(zhuǎn)義
參考
https://www.cnblogs.com/gexiaoshan/p/4260588.html
https://www.w3school.com.cn/js/jsref_encodeURIComponent.asp
