如何區分escape、encodeURI和encodeURIComponent
一、前言
講這3個方法區別的文章太多了,但是大部分寫的都很繞。本文試著從實務角度去講這3個方法。
二、escape和它們不是同一類別
簡單來說,escape是對字串(string)進行編碼(而另外兩種是對URL),作用是讓它們在所有電腦上可讀。
編碼之後的效果是%XX或%uXXXX這種形式。
其中 ASCII字母、數字、@*/+ ,這幾個字元不會#被編碼,其餘的都會。
最關鍵的是,當你需要對URL編碼時,請忘記這個方法,這個方法是針對字串使用的,不適用於URL。
事實上,這個方法我還沒有在實際工作中用過,所以就不多講了。
三、最常用的encodeURI和encodeURIComponent
對URL編碼是常見的事,所以這兩個方法應該是實際中要特別注意的。
它們都是編碼URL,唯一差異就是編碼的字元範圍,其中
encodeURI方法不會對下列字元編碼
# ASCII字母、數字、~!@#$&*()=:/,;?+'#encodeURIComponent方法不會對下列字符編碼
ASCII字母、數字、~!*()'所以encodeURIComponent比encodeURI編碼的範圍更大。
實際例子來說,encodeURIComponent會把 http:// 編碼成 http%3A%2F%2F 而encodeURI卻不會。
四、最重要的,我該什麼場合用什麼方法不同上面說的很清楚了,接下來從實際例子來說把。
#1、如果只是編碼字串,不和URL有半毛錢關係,那麼用escape。
2、如果你需要編碼整個URL,然後需要使用這個URL,那就用encodeURI。
例如encodeURI("http://www.cnblogs.com/season-huang/some other thing");
"http://www.cnblogs.com/season-huang/some%20other%20thing";
其中,空格被編碼變成了%20 。但如果你用了encodeURIComponent,那麼結果變成"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"
。
3、當你需要編碼URL中的參數的時候,那麼encodeURIComponent是最好方法。var param = "http://www.cnblogs.com/season-huang/"; //param为参数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"
以上是如何區分escape、encodeURI和encodeURIComponent的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖,設置斷點以及使用Chrome DevTools和WebPack之類的工具。

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...
