encodeURI VS encodeURIComponent

用于給url中的特殊字符進(jìn)行編碼。

為什么要用？

因?yàn)榫W(wǎng)絡(luò)標(biāo)準(zhǔn)RFC1738做了硬性規(guī)定，只有字符和數(shù)字以及一些規(guī)定內(nèi)的特殊符號(hào)，才可以不經(jīng)過(guò)編碼用于url，換言之就是，如果你的url中包含了規(guī)定之外的符號(hào)，那它就是非法的url, 無(wú)法被服務(wù)器解析，也就無(wú)法訪問(wèn)到你想要的網(wǎng)絡(luò)資源。

為了解決這個(gè)問(wèn)題，js就提供了encodeURI和encodeURIComponent來(lái)給這些規(guī)定之外的符號(hào)進(jìn)行編碼，這樣，服務(wù)器就能正常解析并訪問(wèn)了。

用法？

encodeURI

encodeURI()會(huì)編碼除去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()會(huì)編碼除去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會(huì)進(jìn)行編碼的字符范圍比encodeURI大。

兩者之間如何選用

由于兩者之間唯一的差異就是可被編碼的字符范圍，所以需要根據(jù)實(shí)際需要編碼的字符做抉擇。

情況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

通過(guò)上面的示例我們發(fā)現(xiàn)，由于encodeURIComponent的編碼范圍很廣，如果對(duì)整個(gè)URL調(diào)用，會(huì)導(dǎo)致URL中有特殊作用的符號(hào)被編碼，變成一個(gè)非法的URL了，也就無(wú)法訪問(wèn)了。所以此種情況應(yīng)該選用encodeURI。

情況2：

const name = 'AT&T';
console.log(encodeURI(name));
// AT&T
console.log(encodeURIComponent(name));
// AT%26T

由于encodeURI的編碼范圍較小，導(dǎo)致此處我們希望被編碼的&并沒(méi)有被編碼。所以此種情況應(yīng)該選用encodeURIComponent。

應(yīng)用場(chǎng)景

場(chǎng)景1：

url參數(shù)中包含特殊字符

// 美國(guó)電話電報(bào)公司
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

輸出的結(jié)果缺少了一部分，這是因?yàn)?code>&是一個(gè)標(biāo)準(zhǔn)的url參數(shù)分割符，所以會(huì)被解析為分割符。雖然如此，但本例中的&符號(hào)是屬于名字的一部分，我們不想讓它被解析為url的參數(shù)分隔符。這時(shí)我們就可以使用encodeURIComponent對(duì)name的值進(jìn)行編碼，這樣&就不會(huì)被識(shí)別為參數(shù)分割符了

// 美國(guó)電話電報(bào)公司
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

場(chǎng)景2：

將一個(gè)回調(diào)地址作為參數(shù)附加在另一個(gè)地址上

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ù)時(shí)，會(huì)發(fā)現(xiàn)num參數(shù)丟失了，這是因?yàn)?code>&被當(dāng)成www.test.com的參數(shù)分隔符了，這里我們可以使用encodeURIComponent來(lái)對(duì)redirectUrl進(jìn)行編碼就能解決這個(gè)問(wèn)題。

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

疑問(wèn)

現(xiàn)代瀏覽器會(huì)自動(dòng)識(shí)別URL中的特殊字符并將其編碼，那還需要我們手動(dòng)調(diào)用encodeURI和encodeURIComponent嗎？
答案是看情況，比如在參數(shù)中有中文的情況下，中文在URL中不會(huì)有歧義（中文在URL中不會(huì)有其它含義），所以瀏覽器會(huì)幫你完成編碼，但是，在有些情況下，瀏覽器是不知道你是否需要編碼的，我們拿前面的一個(gè)示例：

// 美國(guó)電話電報(bào)公司
const name = 'AT&T';

這里的&在URL中有兩種含義，一是作為參數(shù)分割符，二是作為普通的字符，這時(shí)，瀏覽器無(wú)法猜測(cè)你的意圖，也就不會(huì)幫你自動(dòng)編碼了，所以，還是需要你主動(dòng)調(diào)用encodeURIComponent。

注意事項(xiàng)

• 他們對(duì)特殊字符的編碼形式是utf-8

以上就是url特殊字符編碼encodeURI VS encodeURIComponent分析的詳細(xì)內(nèi)容，更多關(guān)于url特殊字符編碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論