今天就來(lái)聊聊encodeURIComponent()、encodeURI()、decodeURIComponent()、decodeURI()這幾個(gè)函數(shù)的用法和區(qū)別
對(duì)URL編碼個(gè)解碼？為什么會(huì)有這樣的函數(shù)
- 一般說(shuō)，url由一些英文字符、阿拉伯?dāng)?shù)字、某些特殊字符組成，不能使用其他的字符。如果有漢字組成的url就必須編碼之后使用，這樣的編碼過(guò)程都交給了瀏覽器自身決定，但是不同的瀏覽器會(huì)有不同的編碼方法，所以需要有統(tǒng)一的編碼方式...所以這幾個(gè)全局函數(shù)就起了作用！
全局函數(shù)encodeURIComponent()、encodeURI()
- 首先
encodeURIComponent()、encodeURI()都是用來(lái)編碼 - 用法encodeURIComponent(URIstring)，encodeURI(URIstring)，對(duì)某些特殊字符進(jìn)行十六進(jìn)制的替換。
encodeURIComponent('http://baidu.com?a=12&b=12/12')
// http%3A%2F%2Fbaidu.com%3Fa%3D12%26b%3D12%2F12 全部'/'被編碼，導(dǎo)致url地址無(wú)效
encodeURI('http://baidu.com?a=12&b=12/12')
// http://baidu.com?a=12&b=12/12 '/'沒(méi)有被編碼 導(dǎo)致后面的參數(shù)帶有'/'的參數(shù)無(wú)法正確解析
-
encodeURIComponent()、encodeURI()區(qū)別
（1）encodeURI()，更多的是針對(duì)對(duì)整個(gè)URL進(jìn)行編碼，它不會(huì)對(duì)特殊字符（; / ? : @ & + =等 ）進(jìn)行編碼
（2）encodeURIComponent()是對(duì)'?'后面的參數(shù)進(jìn)行編碼，它會(huì)對(duì)一些特殊字符（; / ? : @ & = + $ , #等）進(jìn)行編碼
// 正確的做法
let param = encodeURIComponent('a=12&b=12/12')
console.log(`http://baidu.com?${param}`)
// http://baidu.com?a%3D12%26b%3D12%2F12
- 實(shí)用：
（1）瀏覽器在get請(qǐng)求過(guò)程中，會(huì)在url后面加上一些參數(shù)，這些參數(shù)中可能會(huì)有帶有某些特殊的字符或者漢字。根據(jù)不同的網(wǎng)頁(yè)編碼(<meta http-equiv="Content-Type" content="text/html;charset=xxxx">)方式會(huì)有不同編碼方式，在后臺(tái)接受這些參數(shù)的時(shí)候，會(huì)造成混亂。
（2）js調(diào)用ajax發(fā)起請(qǐng)求，這個(gè)時(shí)候不同的瀏覽器發(fā)送的參數(shù)編碼方式不盡相同
