只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字，才能不經(jīng)過編碼直接用于 URL。
例如：搜索的中文關(guān)鍵字，復(fù)制網(wǎng)址之后再粘貼就會(huì)發(fā)現(xiàn)該URL已經(jīng)被轉(zhuǎn)碼。
1、escape 和 unescape
原理：對(duì)除ASCII字母、數(shù)字、標(biāo)點(diǎn)符號(hào) @ * _ + - . / 以外的其他字符進(jìn)行編碼。
編碼：escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
結(jié)果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"
escape('張')
結(jié)果："%u5F20"
- 解碼：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
結(jié)果："http://www.baidu.com?name=zhang@xiao@jie&order=1"
unescape("%u5F20")
結(jié)果："張"
2、encodeURI 和 decodeURI
- 原理：返回編碼為有效的統(tǒng)一資源標(biāo)識(shí)符 (URI) 的字符串(即字符串作為 URI 進(jìn)行編碼)，不會(huì)被編碼的字符：! @ # $ & * ( ) = : / ; ? + '
encodeURI()是Javascript中真正用來對(duì)URL編碼的函數(shù)。
- 編碼：encodeURI('http://www.baidu.com?name=張三')
結(jié)果："http://www.baidu.com?name=%E5%BC%A0%E4%B8%89"
- 解碼：decodeURI("http://www.baidu.com?name=%E5%BC%A0%E4%B8%89")
結(jié)果："http://www.baidu.com?name=張三"
3、encodeURIComponent 和 decodeURIComponent
原理：對(duì)URL的組成部分進(jìn)行個(gè)別編碼，而不用于對(duì)整個(gè)URL進(jìn)行編碼
編碼：encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
結(jié)果："http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"解碼：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
結(jié)果："http://www.baidu.com?name=zhang@xiao@jie&order=1"
4、window.btoa() && window.atob() （base64編碼解碼）
-
window.btoa()對(duì)源數(shù)據(jù)進(jìn)行base64編碼 -
window.atob()對(duì)源數(shù)據(jù)進(jìn)行base64解碼
window.btoa()僅支持 ASCII 編碼。對(duì)中文進(jìn)行編碼的話會(huì)拋出錯(cuò)誤
image.png
解決方案1）：
window.btoa(encodeURIComponent('中文'));//JUU0JUI4JUFEJUU2JTk2JTg3
decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'));//中文
解決方案2）[推薦方案]：
- 后端返回的base64數(shù)據(jù)，前端解碼（方案1則不能解碼）
window.btoa(unescape(encodeURIComponent('中文')));//5Lit5paH
decodeURIComponent(escape(window.atob('5Lit5paH')));//中文
//or
var base64 = '5oiR';
decodeURIComponent(
atob(base64).split('').map((charCode)=>
'%' +charCode.charCodeAt(0).toString(16)
).join('')
)
5、javascript中解碼utf-8
https://stackoverflow.com/questions/13356493/decode-utf-8-with-javascript/22373061
function encode_utf8(s) {
return unescape(encodeURIComponent(s));
}
function decode_utf8(s) {
return decodeURIComponent(escape(s));
}
