url特殊字符編碼encodeURI?VS?encodeURIComponent分析
encodeURI VS encodeURIComponent
用于給url中的特殊字符進行編碼。
為什么要用？
因為網(wǎng)絡標準RFC1738做了硬性規(guī)定，只有字符和數(shù)字以及一些規(guī)定內的特殊符號，才可以不經(jīng)過編碼用于url，換言之就是，如果你的url中包含了規(guī)定之外的符號，那它就是非法的url, 無法被服務器解析，也就無法訪問到你想要的網(wǎng)絡資源。
為了解決這個問題，js就提供了encodeURI和encodeURIComponent來給這些規(guī)定之外的符號進行編碼，這樣，服務器就能正常解析并訪問了。
用法？
encodeURI
encodeURI()會編碼除去ASCII碼、數(shù)字和~!@#$&*()=:/,;?+.-_'之外的所有字符。
const url = 'http://www.test.com/images/花朵.png' const nextUrl = encodeURI(url) // http://www.test.com/images/%E8%8A%B1%E6%9C%B5.png
encodeURIComponent
encodeURIComponent()會編碼除去ASCII碼、數(shù)字和~!*().-_'之外的所有字符。
const url = 'http://www.test.com/images/花朵.png' const nextUrl = encodeURIComponent(url) // http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png
兩者之間的差異
encodeURIComponent會進行編碼的字符范圍比encodeURI大。
兩者之間如何選用
由于兩者之間唯一的差異就是可被編碼的字符范圍，所以需要根據(jù)實際需要編碼的字符做抉擇。
情況1：
const url = 'http://www.test.com/images/花朵.png' console.log(encodeURI(url)); http://www.test.com/images/%E8%8A%B1%E6%9C%B5.png console.log(encodeURIComponent(url)); http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png
通過上面的示例我們發(fā)現(xiàn)，由于encodeURIComponent的編碼范圍很廣，如果對整個URL調用，會導致URL中有特殊作用的符號被編碼，變成一個非法的URL了，也就無法訪問了。所以此種情況應該選用encodeURI。
情況2：
const name = 'AT&T'; console.log(encodeURI(name)); // AT&T console.log(encodeURIComponent(name)); // AT%26T
由于encodeURI的編碼范圍較小，導致此處我們希望被編碼的&并沒有被編碼。所以此種情況應該選用encodeURIComponent。
應用場景
場景1：
url參數(shù)中包含特殊字符
// 美國電話電報公司
const name = 'AT&T';
const url = `http://www.test.com?name=${name}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT輸出的結果缺少了一部分，這是因為&是一個標準的url參數(shù)分割符，所以會被解析為分割符。雖然如此，但本例中的&符號是屬于名字的一部分，我們不想讓它被解析為url的參數(shù)分隔符。這時我們就可以使用encodeURIComponent對name的值進行編碼，這樣&就不會被識別為參數(shù)分割符了
// 美國電話電報公司
const name = 'AT&T';
const url = `http://www.test.com?name=${encodeURIComponent(name)}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT&T場景2：
將一個回調地址作為參數(shù)附加在另一個地址上
const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${redirectUrl}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success我們獲取redirectUrl參數(shù)時，會發(fā)現(xiàn)num參數(shù)丟失了，這是因為&被當成www.test.com的參數(shù)分隔符了，這里我們可以使用encodeURIComponent來對redirectUrl進行編碼就能解決這個問題。
const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${encodeURIComponent(redirectUrl)}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success&num=10疑問
現(xiàn)代瀏覽器會自動識別URL中的特殊字符并將其編碼，那還需要我們手動調用encodeURI和encodeURIComponent嗎？
答案是看情況，比如在參數(shù)中有中文的情況下，中文在URL中不會有歧義（中文在URL中不會有其它含義），所以瀏覽器會幫你完成編碼，但是，在有些情況下，瀏覽器是不知道你是否需要編碼的，我們拿前面的一個示例：
// 美國電話電報公司 const name = 'AT&T';
這里的&在URL中有兩種含義，一是作為參數(shù)分割符，二是作為普通的字符，這時，瀏覽器無法猜測你的意圖，也就不會幫你自動編碼了，所以，還是需要你主動調用encodeURIComponent。
注意事項
- 他們對特殊字符的編碼形式是
utf-8
以上就是url特殊字符編碼encodeURI VS encodeURIComponent分析的詳細內容，更多關于url特殊字符編碼的資料請關注腳本之家其它相關文章！
相關文章
本篇文章主要是對js獲取、清空input type="file"的值的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了JavaScript輸入分鐘、秒倒計時的代碼實現(xiàn)，通過css和js代碼展示了邏輯過程，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
今天的這篇文章就分享幾年以來總結的一些最常見和最有用的字符串相關的方法的例子和簡要說明。便于程序員用于快速參考。當然，最有經(jīng)驗的開發(fā)人員對這些操作很熟悉，但我認為這是一個很好的方法幫助初學者理解這些函數(shù)，他可以幫助你使用簡單的語法,完成復雜的操作.2015-04-04
這篇文章主要介紹了JavaScript對象引用與賦值,結合實例形式分析了JavaScript對象引用及賦值的操作技巧與相關注意事項,需要的朋友可以參考下2017-03-03
在javascript中，replace方法是屬于String對象的，可用于替換字符串。今天我們就來詳細探討下一些replace()方法的使用2015-09-09
下面小編就為大家?guī)硪黄鷍s三級聯(lián)動的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
有時候我們希望彈出層能夠實現(xiàn)延遲關閉，并且鼠標在彈出層區(qū)域移動的時候能夠保持顯現(xiàn)，下面是具體的實現(xiàn)代碼。2010-04-04
這篇文章主要介紹了js中比較兩個對象是否相同的方法,結合實例形式詳細分析了js對象遍歷、判斷等相關操作技巧,需要的朋友可以參考下2019-09-09
本文通過具體的示例來給大家詳細解釋了下javascript的連續(xù)賦值問題，十分的實用，有需要的小伙伴可以參考下。2015-07-07
使用pdf-lib.js實現(xiàn)pdf添加自定義水印功能
pdf-lib是一個強大的JavaScript庫,允許在任何JavaScript環(huán)境中創(chuàng)建和修改PDF文檔,下面就跟隨小編一起來學習一下如何使用pdf-lib實現(xiàn)pdf添加自定義水印功能吧2024-11-11