欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文詳解JavaScript中的URL編碼和解碼

 更新時(shí)間：2024年03月24日 08:43:18   作者：StriveToY  
在本文中,我們將探討在 JavaScript 中處理 URL 的現(xiàn)代技術(shù),并回答與在 JavaScript 中編碼和解碼 URL 相關(guān)的問題,文中通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下

URL，是訪問互聯(lián)網(wǎng)資源的地址。每個(gè) URL 都指向網(wǎng)絡(luò)上的唯一資源。 URL 有時(shí)可能包含特殊字符或需要?jiǎng)討B(tài)操作。

在本文中，我們將探討在 JavaScript 中處理 URL 的現(xiàn)代技術(shù)，并回答與在 JavaScript 中編碼和解碼 URL 相關(guān)的問題。

當(dāng)在瀏覽器中輸入內(nèi)容時(shí)，會(huì)提供一個(gè)或多個(gè)搜索結(jié)果。這些搜索結(jié)果的格式令人困惑，包含文本和特殊字符，例如 %、+、?、=、&、<、> 等。

在 JavaScript 中使用 URL

在開始對(duì) URL 進(jìn)行編碼和解碼之前，我們需要學(xué)習(xí)如何在 JavaScript 中使用 URL。當(dāng)需要構(gòu)建、解析和操作網(wǎng)址時(shí)，這非常有用?，F(xiàn)代 JavaScript 提供了一個(gè)內(nèi)置URL類，它提供了處理 URL 的強(qiáng)大功能：

  • 創(chuàng)建 URL 對(duì)象： 要在 JavaScript 中使用 URL，可以使用此 URL 語法創(chuàng)建 URL 對(duì)象。
const url = new URL("https://juejin.cn/editor?q=hello world");

訪問 URL 組件： 一旦擁有 URL 對(duì)象，就可以訪問 URL 的各個(gè)組件?？梢栽L問以下組件：

  • url.protocol：返回 URL 的協(xié)議（例如“https:”）
  • url.hostname：返回 URL 的主機(jī)名（例如“juejin.cn”）
  • url.pathname：返回 URL 的路徑（例如“/editor”）
  • url.searchParams：返回包含查詢參數(shù)的 URLSearchParams 對(duì)象
console.log(url.protocol);     // Output: https:
console.log(url.hostname);     // Output: juejin.cn
console.log(url.pathname);     // Output: /editor
console.log(url.searchParams); // Output: q=hello+world
  • 將 URL 對(duì)象或組件轉(zhuǎn)換為字符串： 可以使用toString()JavaScript 方法獲取 URL，或者在本例中獲取字符串形式的 URL 組件。
console.log(url.searchParams.toString());
// Output: q=hello+world
  • 獲取當(dāng)前頁面 URL：要獲取當(dāng)前所在網(wǎng)頁的當(dāng)前 URL，請(qǐng)使用該window.location.href屬性。
const currentUrl = window.location.href;
console.log(currentUrl);
  • 修改 URL 組件： searchParams可以使用URL 對(duì)象的屬性輕松修改 URL 的查詢參數(shù)。
url.searchParams.set("q", "new query");
console.log(url.searchParams.toString());
// Output: q=new+query

這將以編碼格式將“q”查詢參數(shù)的值從“hello world”更新為“new+query”。

  • 構(gòu)造新的 URL： 還可以通過組合不同的組件或修改現(xiàn)有的組件來構(gòu)造新的 URL。
const newURL = new URL("https://juejin.cn");
newURL.pathname = "/new-path";
newURL.searchParams.set("q", "new query");
console.log(newURL.toString())
// Output: https://juejin.cn/new-path?q=new+query

上面的代碼行首先創(chuàng)建一個(gè) URL 對(duì)象，設(shè)置路徑名，然后設(shè)置查詢參數(shù)，構(gòu)造一個(gè)新的 URL。然后它將結(jié)果轉(zhuǎn)換為字符串以便于閱讀。

嘗試運(yùn)行上面提供的所有代碼片段，了解如何在 JavaScript 中使用 URL。

現(xiàn)在我們已經(jīng)學(xué)習(xí)了如何在 JavaScript 中使用 URL，接下來我們將學(xué)習(xí)如何在 JavaScript 中對(duì) URL 進(jìn)行編碼和解碼。

在 JavaScript 中編碼 URL

對(duì) URL 進(jìn)行編碼本質(zhì)上意味著將 URL 中的特殊字符轉(zhuǎn)換為可以在互聯(lián)網(wǎng)上正確傳輸?shù)母袷健?/p>

此過程是必要的，因?yàn)?URL 中的某些字符（例如空格或符號(hào)）可能具有獨(dú)特的含義，對(duì)它們進(jìn)行編碼可確保瀏覽器和 Web 服務(wù)器正確解釋它們。

現(xiàn)在，為什么需要對(duì) URL 進(jìn)行編碼？這是因?yàn)槟J(rèn)情況下 URL 可以包含的字符受到限制。標(biāo)準(zhǔn) URL 規(guī)范規(guī)定 URL 只能包含 ASCII 字符集中的字符，該字符集由 128 個(gè)字符組成。這些字符包括大寫和小寫字母、數(shù)字以及有限的特殊字符，例如“-”、“_”、“.”和“~”。

保留字符在 URL 中具有特定含義，不屬于標(biāo)準(zhǔn) ASCII 集，如果在 URL 中使用，則必須對(duì)其進(jìn)行編碼。保留字符有“/”、“[”、“]”、“@”、“%”、“:”、“&”、“#”、“@”、“=”、”等。

要在 URL 中包含保留字符，必須對(duì)它們進(jìn)行百分比編碼，這意味著將它們替換為百分號(hào) (“%”)，后跟其十六進(jìn)制值。例如，由于 URL 不能包含空格，因此空格字符（“ ”）被編碼為“%20”或“+”，而符號(hào)（“&”）被編碼為“%26”。

JavaScript 提供了兩個(gè)對(duì) URL 進(jìn)行編碼的函數(shù)：encodeURI()和encodeURIComponent()。

功能encodeURIComponent()?

該encodeURIComponent()函數(shù)對(duì) URI 組件（例如查詢參數(shù)）進(jìn)行編碼，其中某些字符具有特殊含義，必須進(jìn)行編碼。它對(duì)除標(biāo)準(zhǔn) ASCII 字母數(shù)字字符（AZ、az 和 0-9）、連字符（“-”）、下劃線（“_”）、句點(diǎn)（“.”）和波形符（“~”）之外的所有字符進(jìn)行編碼。

看看下面的代碼片段及其結(jié)果：

const url = "https://baidu.com";
const encodedURL = encodeURIComponent(url);
console.log(encodedURL);
// Output: https%3A%2F%2Fbaidu.com

在第一個(gè)示例中，我們定義了一個(gè)變量“url”并為其分配了一個(gè)值我們調(diào)用該encodedURIComponent()函數(shù)，并將“url”作為參數(shù)傳遞。然后，該函數(shù)通過用百分比編碼表示替換特定字符來對(duì) URL 進(jìn)行編碼，并將其記錄到終端。

':' 和 '/' 等字符已替換為其百分比編碼表示形式（分別為 %3A 和 %2F）。

const url2 = "mango &amp; pineapple";
const encodedURL2 = encodeURIComponent(url2);
console.log(encodedURL2);
// Output: mango%20%26%20pineapple

在示例 2 中，能看到代表空格和與號(hào) (&) 字符的“%20”和“%26”符號(hào)嗎？傳遞的值不是 URL，但它是 JavaScript 如何對(duì)空格和與號(hào)進(jìn)行編碼的一個(gè)很好的示例。

有關(guān)該encodeURIComponent()函數(shù)的更多信息，請(qǐng)參閱MDN 文檔。

功能encodeURI()?

該encodeURI函數(shù)用于對(duì)整個(gè) URI 進(jìn)行編碼，包括整個(gè) URL。它不會(huì)對(duì) URI 中允許的某些字符進(jìn)行編碼，例如字母、數(shù)字、連字符、句點(diǎn)和下劃線。

未編碼的字符與encodeURI該函數(shù)的字符相同encodeURIComponent，再加上幾個(gè)，即：

  • 問號(hào)（“？”）
  • 井號(hào)（“#”）
  • 美元符號(hào)（“$”）
  • 與號(hào)（“&”）
  • 逗號(hào)（“，”）
  • 正斜杠（“/”）
  • 冒號(hào) （”：”）
  • 分號(hào)（“;”）
  • 符號(hào)（“@”）
  • 等號(hào)（“=”）
  • 加號(hào)（“+”）

讓我們看一些代碼片段。

const url = 'https://www.baidu.com';
console.log(encodeURI(url)); 
// Output: https://www.baidu.com

結(jié)果與給定的 URL 相同，因?yàn)樵?code>encodeURI()函數(shù)不對(duì)某些字符（例如斜杠、句點(diǎn)和冒號(hào)）進(jìn)行編碼。

如果encodeURIComponent()在同一示例中使用，將觀察到某些字符已被編碼。讓我們嘗試一下。

const url = 'https://www.baidu.com';
console.log(encodeURIComponent(url)); 
// Output: https%3A%2F%2Fwww.baidu.com

現(xiàn)在，對(duì)于更復(fù)雜的代碼示例，要編碼的 URL 的值是查詢參數(shù)。

const url = "https://juejin.cn/search?q=hello world";

console.log(encodeURI(url));
// Output: "https://juejin.cn/search?q=hello%20world"

console.log(encodeURIComponent(url));
// Output: https%3A%2F%2Fjuejin.cn%2Fsearch%3Fq%3Dhello%20world

該encodeURI()函數(shù)只是將查詢輸入中的空格字符編碼為“%20”。另一方面，對(duì)encodeURIComponent()查詢參數(shù)中的冒號(hào)、斜杠和空格字符進(jìn)行編碼。

有關(guān)該encodeURI()函數(shù)的更多信息，請(qǐng)參閱MDN 文檔。

理解這兩個(gè)函數(shù)之間差異的關(guān)鍵是注意這兩個(gè)函數(shù)對(duì)哪些字符進(jìn)行了編碼，哪些字符沒有進(jìn)行編碼。雖然它們略有不同，但它們都執(zhí)行相同的操作 - 對(duì) URL 進(jìn)行編碼，使其更容易在互聯(lián)網(wǎng)上傳輸。

需要對(duì) URL 進(jìn)行編碼的原因

  • 安全性和準(zhǔn)確性：  URL 可能包含特殊字符，例如空格或查詢參數(shù)，網(wǎng)絡(luò)服務(wù)器或?yàn)g覽器可能會(huì)誤解這些字符。對(duì) URL 進(jìn)行編碼可確保正確解釋特殊字符，從而減少錯(cuò)誤并確保準(zhǔn)確傳輸。
  • 數(shù)據(jù)完整性： 在 URL 中發(fā)送數(shù)據(jù)（例如搜索查詢或表單提交）時(shí)，編碼可確保數(shù)據(jù)在傳輸過程中得到保留。解碼允許接收器正確處理和解釋數(shù)據(jù)。

在 JavaScript 中解碼 URL

解碼與編碼相反。它恢復(fù)編碼 URL 的效果。

解碼 URL 需要將百分比編碼字符轉(zhuǎn)換回其原始形式。當(dāng)收到編碼的 URL 并需要從中提取信息時(shí)，解碼就很重要，這類似于解決一個(gè)難題，必須解碼才能接收消息。

功能decodeURIComponent()?

在 JavaScript 中，可以使用該函數(shù)解碼 URL decodeURIComponent()。當(dāng)調(diào)用此函數(shù)來解碼 URL 時(shí)，它會(huì)解碼 URI 的每個(gè)組成部分。

const encodedURL = "https%3A%2F%2Fjuejin.cn%2Fsearch%3Fq%3Dhello%20world";
console.log(decodeURIComponent(encodedURL));
// Output: "https://juejin.cn/search?q=hello world"&quot;"

此處，該decodeURIComponent()函數(shù)將編碼后的 URL 作為輸入并返回解碼后的 URL。

此MDN 文檔提供了有關(guān)此功能的更多信息。

功能decodeURI()?

該decodeURI()函數(shù)用于解碼整個(gè) URI，包括域、路徑和查詢參數(shù)。

const url = "https://sample.com/search?q=hello world";
console.log(encodeURI(url));
// Output: https://sample.com/search?q=hello%20world

console.log(decodeURI(url));
// Output: https://sample.com/search?q=hello world

在上面的示例中，我們使用該函數(shù)對(duì) URL 查詢參數(shù)進(jìn)行編碼encodeURI()，并使用該decodeURI()函數(shù)對(duì)編碼后的 URL 進(jìn)行解碼。

查看MDN 文檔以獲取有關(guān)該decodeURI()方法的更多信息。

學(xué)習(xí)如何在 JavaScript 中對(duì) URL 進(jìn)行編碼和解碼是一回事；學(xué)習(xí)如何在 JavaScript 中對(duì) URL 進(jìn)行編碼和解碼是一回事。了解何時(shí)對(duì) URL 進(jìn)行編碼和解碼是另一回事。

何時(shí)對(duì) URL 進(jìn)行編碼

以下是可能需要對(duì) URL 進(jìn)行編碼的一些常見場景：

  • 生成動(dòng)態(tài) URL： 如果應(yīng)用程序動(dòng)態(tài)生成 URL（例如根據(jù)用戶輸入或數(shù)據(jù)庫值生成鏈接），請(qǐng)確保任何用戶生成的輸入都經(jīng)過正確編碼。這可確保 URL 中的任何特殊字符都轉(zhuǎn)換為可以通過 Internet 安全傳輸?shù)母袷健?/li>
const dynamicValue = "hello world";
const encodedURL = "https://juejin.cn/search?q=" + encodeURIComponent(dynamicValue);
console.log(encodedURL);
// Output: "https://juejin.cn/search?q=hello%20world"
  • 使用 URL 參數(shù)處理表單提交： 當(dāng)用戶提交表單數(shù)據(jù)（例如用戶配置文件）時(shí)，表單數(shù)據(jù)通常作為查詢參數(shù)包含在 URL 中。如果它包含特殊字符（例如 &、? 或空格），則應(yīng)在通過 GET 或 POST 請(qǐng)求發(fā)送 URL 參數(shù)之前對(duì)其進(jìn)行編碼。這可以防止由于 URL 中的無效字符導(dǎo)致的意外行為或錯(cuò)誤，并確保數(shù)據(jù)安全傳輸。
<form action="https://juejin.cn/search">
  <input type="text" name="q" value="hello world">
  <input type="submit" value="Search">
</form>
  • 單擊提交按鈕時(shí)，表單會(huì)將數(shù)據(jù)提交到“https://https://juejin.cn//search”。
  • 表單數(shù)據(jù)使用 GET 方法進(jìn)行編碼并發(fā)送到服務(wù)器，因?yàn)樗侵付?action 屬性時(shí)表單提交的默認(rèn)方法。
  • 第一個(gè)輸入字段包含值“hello world”。提交表單后，該值將被編碼并作為查詢參數(shù)附加到 URL。例如，編碼后的 URL 可能類似于“https://https://juejin.cn//search?q=hello%20world”。
  • 通過 Ajax 請(qǐng)求發(fā)送數(shù)據(jù)： 發(fā)送 Ajax 請(qǐng)求以從服務(wù)器檢索數(shù)據(jù)時(shí)，通常會(huì)在 URL 中包含參數(shù)。這些參數(shù)可能包含特殊字符，因此有必要對(duì) URL 進(jìn)行編碼，以確保的 Ajax 請(qǐng)求正常工作并避免特殊字符引起的意外問題。
const inputWord = "hello world";
const encodedInputWord = encodeURIComponent(inputWord);
const url = "https://https://juejin.cn//api/search?q=" + encodedInputWord; JAVASCRIPT

何時(shí)解碼 URL

以下是可能需要解碼 URL 的一些常見場景：

  • 處理從外部源接收的 URL： 外部源（例如 API 響應(yīng)、用戶輸入）可以提供編碼的 URL。解碼這些 URL 可以讓提取原始信息并確保數(shù)據(jù)得到正確解釋。
const encodedURL = "https%3A%2F%2Fbaidu.com%2Fsearch%3Fq%3Dhello%20world";
const decodedURL = decodeURIComponent(encodedURL);
console.log(decodedURL); // Output: "https://baidu.com/search?q=hello world"
  • 在用戶界面中顯示 URL： 在應(yīng)用程序的用戶界面中顯示 URL 時(shí)，請(qǐng)確保它們采用原始的、人類可讀的格式。對(duì) URL 進(jìn)行解碼可確保它們正確地顯示給用戶。
 const encodedURL = "https%3A%2F%2Fbaidu.com%2Fsearch%3Fq%3Dhello%20world";
 const decodedURL = decodeURIComponent(encodedURL);
 document.getElementById("url").textContent = decodedURL; // Output on the browser UI: "https://baidu.com/search?q=hello world"

URL 編碼和解碼工具

除了大多數(shù)編程語言中用于編碼和解碼 URL 的內(nèi)置函數(shù)之外，還有在線工具可用于執(zhí)行基本的編碼和解碼操作。此類工具的示例包括urlencode.org、urldecoder.org和gochyu url encode。

這些工具使用起來很簡單：輸入想要編碼或解碼的 URL，即可獲得結(jié)果。

結(jié)論

總之，理解 URL 編碼和解碼的概念對(duì)于任何 Web 開發(fā)人員來說都是至關(guān)重要的。這些流程可確保通過互聯(lián)網(wǎng)傳輸數(shù)據(jù)時(shí)的數(shù)據(jù)完整性、安全性和準(zhǔn)確性。了解何時(shí)以及如何對(duì) URL 進(jìn)行編碼或解碼可以幫助開發(fā)人員開發(fā)安全可靠的 Web 應(yīng)用程序，從而有效地處理與 URL 相關(guān)的任務(wù)。

以上就是一文詳解JavaScript中的URL編碼和解碼的詳細(xì)內(nèi)容，更多關(guān)于JavaScript URL編碼和解碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論