javascript encodeURI和encodeURIComponent的比較

來源:互聯網
上載者:User

背景
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編碼轉化成為一個、兩個或者三個位元組的十六進位逸出字元(%xx)。例如,字元空格" "轉換成為"%20"。在這種編碼模式下面,需要編碼的ASCII字元用一個位元組逸出字元代替,在\u0080和\u007ff之間的字元用兩個位元組逸出字元代替,其他16為Unicode字元用三個位元組逸出字元代替
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頁面會建立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編碼後的字串

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.