javascript encodeURI和encodeURIComponent的比較

更新時間：2010年04月03日 09:45:54 作者：

在進行SaaS前端開發(fā)的時候，大家經常會用到兩個JavaScriptNative函數：encodeURI 和 encodeURIComponent。這篇文章詳細解釋這兩個函數的用途并比較它們的不同之處

背景
encodeURI 和 encodeURIComponent都是ECMA-262標準中定義的函數,所有兼容這個標準的語言（如JavaScript, ActionScript）都會實現這兩個函數。它們都是用來對URI （RFC-2396）字符串進行編碼的全局函數，但是它們的處理方式和使用場景有所不同。為了解釋它們的不同，我們首先需要理解RFC-2396中對于URI中的字符分類
保留字符（reserved characters）：這類字符是URI中的保留關鍵字符，它們用于分割URI中的各個部分。這些字符是：";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | ","
Mark字符（mark characters）：這類字符在RFC-2396中特別定義，但是沒有特別說明用途，可能是和別的RFC標準相關。這些字符是："-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"
基本字符（alphanum characters）：這類字符是URI中的主體部分，它包括所有的大寫字母、小寫字母和數字
在介紹完上面三類字符串后，我們就非常容易來解釋encodeURI和encodeURIComponent函數的不同之處了：
encodeURI: 該函數對傳入字符串中的所有非（基本字符、Mark字符和保留字符）進行轉義編碼（escaping）。所有的需要轉義的字符都按照UTF-8編碼轉化成為一個、兩個或者三個字節(jié)的十六進制轉義字符（％xx）。例如，字符空格" "轉換成為"%20"。在這種編碼模式下面，需要編碼的ASCII字符用一個字節(jié)轉義字符代替，在\u0080和\u007ff之間的字符用兩個字節(jié)轉義字符代替，其他16為Unicode字符用三個字節(jié)轉義字符代替
encodeURIComponent: 該函數處理方式和encodeURI只有一個不同點，那就是對于保留字符同樣做轉義編碼。例如，字符":"被轉義字符"%3A"代替
之所以有上面兩個不同的函數，是因為我們在寫JS代碼的時候對URI進行兩種不同的編碼處理需求。encodeURI可以用來對完整的URI字符串進行編碼處理。而encodeURIComponent可以對URI中一個部分進行編碼，從而讓這一部分可以包含一些URI保留字符。這在我們日常編程中是十分有用的。比如下面的URI字符串：
http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html
在這個URI字符串中。send-to-friend.aspx頁面會創(chuàng)建HTML格式的郵件內容，里面會包含一個鏈接，這個鏈接的地址就是上面URI字符串中的url值。顯然上面的url值是URI中的一個部分，里面包含了URI保留關鍵字符。我們必須調用encodeURIComponent對它進行編碼后使用，否則上面的URI字符串會被瀏覽器認為是一個無效的URI。正確的URI應該如下：
http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html
例子
encodeURI

復制代碼代碼如下:

 
var uri="my test.asp?name=ståle&car=saab"; 
document.write(encodeURI(uri)); 

上面的輸出如下：
my%20test.asp?name=st%C3%A5le&car=saab

encodeURIComponent

復制代碼代碼如下:

 
var uri="http://jb51.net/my test.asp?name=ståle&car=saab"; 
document.write(encodeURIComponent(uri)); 

上面的輸出如下：
http%3A%2F%2Fjb51.net%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab
其他
在ECMA-262標準中還定義了和這兩個encode函數向對應的decode全局函數，它們是decodeURI和decodeURIComponent。我們可以用它們來decode編碼后的字符串

您可能感興趣的文章: