简单明了区分escape、encodeURI和encodeURIComponent
一、前言
講這3個(gè)方法區(qū)別的文章太多了,但是大部分寫的都很繞。本文試圖從實(shí)踐角度去講這3個(gè)方法。
二、escape和它們不是同一類
簡(jiǎn)單來說,escape是對(duì)字符串(string)進(jìn)行編碼(而另外兩種是對(duì)URL),作用是讓它們?cè)谒须娔X上可讀。
編碼之后的效果是%XX或者%uXXXX這種形式。
其中?ASCII字母、數(shù)字、@*/+?,這幾個(gè)字符不會(huì)被編碼,其余的都會(huì)。
最關(guān)鍵的是,當(dāng)你需要對(duì)URL編碼時(shí),請(qǐng)忘記這個(gè)方法,這個(gè)方法是針對(duì)字符串使用的,不適用于URL。
事實(shí)上,這個(gè)方法我還沒有在實(shí)際工作中用到過,所以就不多講了。
?
三、最常用的encodeURI和encodeURIComponent
對(duì)URL編碼是常見的事,所以這兩個(gè)方法應(yīng)該是實(shí)際中要特別注意的。 它們都是編碼URL,唯一區(qū)別就是編碼的字符范圍,其中 encodeURI方法不會(huì)對(duì)下列字符編碼??ASCII字母、數(shù)字、~!@#$&*()=:/,;?+' encodeURIComponent方法不會(huì)對(duì)下列字符編碼?ASCII字母、數(shù)字、~!*()' 所以encodeURIComponent比encodeURI編碼的范圍更大。 實(shí)際例子來說,encodeURIComponent會(huì)把 http:// ?編碼成 ?http%3A%2F%2F 而encodeURI卻不會(huì)。四、最重要的,我該什么場(chǎng)合用什么方法
區(qū)別上面說的很清楚了,接下來從實(shí)際例子來說說把。 1、如果只是編碼字符串,不和URL有半毛錢關(guān)系,那么用escape。 2、如果你需要編碼整個(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)?/p> "http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"
看到了區(qū)別嗎,連 "/" 都被編碼了,整個(gè)URL已經(jīng)沒法用了。
3、當(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"轉(zhuǎn)載于:https://www.cnblogs.com/Yusco/p/8950292.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的简单明了区分escape、encodeURI和encodeURIComponent的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。