如果你要操作 URI,你就忘掉 escape 吧,這是個(gè)不相關(guān)的函數(shù)。接下來(lái) encodeURI 和 encodeURIComponent 兩個(gè)名字已經(jīng)說(shuō)得很清楚了。encodeURI 是用來(lái)處理整個(gè) URI 的柳琢,它應(yīng)該接受 URI 的 protocol, host, port 等部分,只對(duì) path 和 query 進(jìn)行編碼润脸。而 encodeURIComponent 是用來(lái)編碼你準(zhǔn)備用作 query 一部分的字符串的柬脸。
一、escape和它們不是同一類
簡(jiǎn)單來(lái)說(shuō)毙驯,escape是對(duì)字符串(string)進(jìn)行編碼倒堕,作用是讓它們?cè)谒须娔X上可讀,而另外兩種是對(duì)URL進(jìn)行編碼爆价。
編碼之后的效果是 %XX
或者 %uXXXX
這種形式垦巴。
其中 ASCII字母 數(shù)字 @ * / +
這幾個(gè)字符不會(huì)被編碼媳搪,其余的都會(huì)。
最關(guān)鍵的是骤宣,當(dāng)你需要對(duì)URL編碼時(shí)秦爆,請(qǐng)忘記這個(gè)方法,這個(gè)方法是針對(duì)字符串使用的憔披,不適用于URL等限。
二、最常用的encodeURI和encodeURIComponent
對(duì)URL編碼是常見(jiàn)的事芬膝,所以這兩個(gè)方法應(yīng)該是實(shí)際中要特別注意的望门。
它們都是編碼URL,唯一區(qū)別就是編碼的字符范圍锰霜,其中:
- encodeURI方法不會(huì)對(duì)下列字符編碼
ASCII字母 數(shù)字 ~ ! @ # $ & * ( ) = : / , ; ? + '
- encodeURIComponent方法不會(huì)對(duì)下列字符編碼
ASCII字母 數(shù)字 ~ ! * ( ) '
所以encodeURIComponent比encodeURI編碼的范圍更大筹误。
實(shí)際例子來(lái)說(shuō),encodeURIComponent會(huì)把 http://
編碼成 http%3A%2F%2F
癣缅,而encodeURI卻不會(huì)厨剪。
三、最重要的所灸,什么場(chǎng)合應(yīng)該用什么方法
- 如果只是編碼字符串丽惶,不和URL有半毛錢關(guān)系炫七,那么用escape爬立。
- 如果你需要編碼整個(gè)URL,然后需要使用這個(gè)URL万哪,那么用encodeURI侠驯。
比如encodeURI("http://www.cnblogs.com/season-huang/some other thing");
編碼后會(huì)變?yōu)?"http://www.cnblogs.com/season-huang/some%20other%20thing";
其中,空格被編碼成了%20
奕巍,但是如果用了encodeURIComponent吟策,那么結(jié)果變?yōu)椋?br>"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"
看到區(qū)別了嗎,連 "/" 都被編碼了的止,整個(gè)URL已經(jīng)沒(méi)法用了檩坚。 - 當(dāng)你需要編碼URL中的參數(shù)的時(shí)候,那么encodeURIComponent是最好方法诅福。
var param = "http://www.cnblogs.com/season-huang/"; //param為參數(shù)
param = encodeURIComponent(param);
var url = "http://www.cnblogs.com?next=" + param;
console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"
看到了吧匾委,參數(shù)中的 "/"
可以編碼,如果用encodeURI肯定要出問(wèn)題氓润,因?yàn)楹竺娴?"/"
是需要編碼的赂乐。