1. 程式人生 > >前端編碼之escape、encodeURI和encodeURIComponent

前端編碼之escape、encodeURI和encodeURIComponent

一、前言

講這3個方法區別的文章太多了,但是大部分寫的都很繞。本文試圖從實踐角度去講這3個方法。

二、escape和它們不是同一類

簡單來說,escape是對字串(string)進行編碼(而另外兩種是對URL),作用是讓它們在所有電腦上可讀。
編碼之後的效果是%XX或者%uXXXX這種形式。
其中 ASCII字母、數字、@*/+ ,這幾個字元不會被編碼,其餘的都會。
最關鍵的是,當你需要對URL編碼時,請忘記這個方法,這個方法是針對字串使用的,不適用於URL。
事實上,這個方法我還沒有在實際工作中用到過,所以就不多講了。

三、最常用的encodeURI和encodeURIComponent

對URL編碼是常見的事,所以這兩個方法應該是實際中要特別注意的。它們都是編碼URL,唯一區別就是編碼的字元範圍,其中encodeURI方法不會
對下列字元編碼  ASCII字母、數字、[email protected]#$&*()=:/,;?+'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"

看到了區別嗎,連 "/" 都被編碼了,整個URL已經沒法用了

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"
看到了把,引數中的 "/" 可以編碼,如果用encodeURI肯定要出問題,因為後面的/是需要編碼的。

相關推薦

前端編碼escapeencodeURIencodeURIComponent

一、前言講這3個方法區別的文章太多了,但是大部分寫的都很繞。本文試圖從實踐角度去講這3個方法。二、escape和它們不是同一類簡單來說,escape是對字串(string)進行編碼(而另外兩種是對URL),作用是讓它們在所有電腦上可讀。編碼之後的效果是%XX或者%uXXXX這

簡明區分escapeencodeURIencodeURIComponent

aso 字符串 () 問題 最好 %x 空格 con %u 一、前言 講這3個方法區別的文章太多了,但是大部分寫的都很繞。本文試圖從實踐角度去講這3個方法。 二、escape和它們不是同一類 簡單來說,escape是對字符串(string)進行編碼(而另外兩種是對URL

區分escapeencodeURIencodeURIComponent

一、前言 講這3個方法區別的文章太多了,但是大部分寫的都很繞。本文試圖從實踐角度去講這3個方法。   二、escape和它們不是同一類 簡單來說,escape是對字串(string)進行編碼(而另外兩種是對URL),作用是讓它們在所有電腦上可讀。 編碼之後的效果是%XX或者

簡單明瞭區分escapeencodeURIencodeURIComponent

一、前言 講這3個方法區別的文章太多了,但是大部分寫的都很繞。本文試圖從實踐角度去講這3個方法。 二、escape和它們不是同一類 簡單來說,escape是對字串(string)進行編碼(而另外兩種是對URL),作用是讓它們在所有電腦上可讀。 編碼之後的效果是%X

JS中為什麼會存在escapeencodeURIencodeURIComponent方法

1.為什麼需要以上三個方法?    當我們瀏覽網頁的時候看,會在瀏覽器的位址列輸入相應的URL地址,然而對於URL中的可以出現的字元是有要求的。       對於URL中的可以出現的字元要求可詳見RFC 1738,具體為以下內容: Thus, only alphan

URL傳參問題,區分escapeencodeURIencodeURIComponent

1、escape和它們不是同一類 簡單來說,escape是對字串(string)進行編碼(而另外兩種是對URL),作用是讓它們在所有電腦上可讀。 編碼之後的效果是%XX或者%uXXXX這種形式。 其中 ASCII字母、數字、@*/+ ,這幾個字元不會被編碼,其餘的都會。 最

escape()encodeURI()encodeURIComponent() 編碼解碼

escape 輸出 one body 說明 簡單 跳轉 blog 部分 1 escape()、encodeURI()、encodeURIComponent()區別詳解 2 3 JavaScript中有三個可以對字符串編碼的函數,分別是: escape,enc

URL傳遞過程中幾種編碼escape()encodeURI()encodeURIComponent()

在地址URL傳輸過程中常常需要對中文,特殊符號等進行編碼,常用到的編碼方式有escape()、encodeURI()、encodeURIComponent() 一文中有詳細的闡述,本人只在這裡記錄一下個人的使用心得  首先escape()使用限制較多,轉碼也不完全,使用

escape()encodeURI()encodeURIComponent()區別詳解

ava 區別 enc esc http %x 其中 con sdn 前言 JavaScript中有三個可以對字符串編碼的函數,分別是:escape,encodeURI,encodeURIComponent,相應3個解碼函數:unescape,decodeURI,decod

關於js中的 escape() encodeURI() encodeURIComponent()函式詳解

首先看一下這三個函式在js版本中出現的時間  escape()                          

關於js中的 escape() encodeURI() encodeURIComponent()函式詳解

首先看一下這三個函式在js版本中出現的時間  escape()                           javascript 1.0 encodeURI()             

前端面試總結httphtml瀏覽器

前言:本文是轉載文,文章中的'我'指原作者 1.http和https https的SSL加密是在傳輸層實現的。 (1)http和https的基本概念 http: 超文字傳輸協議,是網際網路上應用最為廣泛的一種網路協議,是一個客戶端和伺服器端請求和應答的標準(TCP),用於從WWW伺服

url編碼函式encodeURIencodeURIComponent方法

一、作用全域性函式encodeURI和encodeURIComponent方法,都可以用來進行url編碼。之所以要對url進行編碼,是因為瀏覽器不能識別某些字元,例如:空格、中文等。這兩個方法對這些特殊字元用特殊的UTF-8進行編碼,從而使得瀏覽器可以識別。二、區別首先要講解

關於 escapeencodeURIencodeURIComponent

escape() 函式可對字串進行編碼,這樣就可以在所有的計算機上讀取該字串。解碼:unescape() encodeURI() 函式可把字串作為 URI 進行編碼。 解碼:decodeURI() encodeURIComponent() 函式可把字串作為 URI 元件進行編碼。解碼:de

前端儲存sessionStoragelocalStoragecookieindexedDB

一、js三種儲存方式區別 sessionStorage、localStorage、cookie 相同點:都儲存在瀏覽器端,同源的: 不同點: 1》傳遞方式不同 cookie資料始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和伺服器

C/C++ 文件操作CreateFileReadFileWriteFile

amp 列表 invalid bsp 功能 空間 out 系統 file 通常使用下列函數來通過Win系統來對外圍設備進行通信處理: ------------------------------- 1. CreateFile   這個函數的功能是創建或者打開一個文件或者I/

C++知識回顧__stdcall__cdcel__fastcall三者的區別

進行 pan span number 適用於 編譯器 api num 處理 __stdcall、__cdecl和__fastcall是三種函數調用協議,函數調用協議會影響函數參數的入棧方式、棧內數據的清除方式、編譯器函數名的修飾規則等。 調用協議常用場合 __stdca

我的web前端學習路-CSS-列表表格

表示 hang idt char rac 一個 ddr web前端 9.png list-style-image和list-style-type只能選擇一個使用 border-collapse和border-spacing不能同時使用 1 <head>

djangocookiesessionajax

length clean 投票 console 默認值 設置 什麽 save pre 1 Cookie cookie是什麽? 保存在客戶端瀏覽器上的鍵值對 {k:v} cookie依附在請求頭或響應頭中出現 發

JavabytecharString類型相互轉換

rac static rgs div body valueof () print byte[] 1 package basictype; 2 3 /** 4 * byte、char和String類型相互轉換 5 */ 6 public class C