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

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

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

在 JavaScript 中使用 URL

在開始對 URL 進行編碼和解碼之前，我們需要學習如何在 JavaScript 中使用 URL。當需要構建、解析和操作網(wǎng)址時，這非常有用。現(xiàn)代 JavaScript 提供了一個內(nèi)置URL類，它提供了處理 URL 的強大功能：

• 創(chuàng)建 URL 對象： 要在 JavaScript 中使用 URL，可以使用此 URL 語法創(chuàng)建 URL 對象。

const url = new URL("https://juejin.cn/editor?q=hello world");

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

• url.protocol：返回 URL 的協(xié)議（例如“https:”）
• url.hostname：返回 URL 的主機名（例如“juejin.cn”）
• url.pathname：返回 URL 的路徑（例如“/editor”）
• url.searchParams：返回包含查詢參數(shù)的 URLSearchParams 對象

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 對象或組件轉(zhuǎn)換為字符串： 可以使用toString()JavaScript 方法獲取 URL，或者在本例中獲取字符串形式的 URL 組件。

console.log(url.searchParams.toString());
// Output: q=hello+world

• 獲取當前頁面 URL：要獲取當前所在網(wǎng)頁的當前 URL，請使用該window.location.href屬性。

const currentUrl = window.location.href;
console.log(currentUrl);

• 修改 URL 組件： searchParams可以使用URL 對象的屬性輕松修改 URL 的查詢參數(shù)。

url.searchParams.set("q", "new query");
console.log(url.searchParams.toString());
// Output: q=new+query

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

• 構造新的 URL： 還可以通過組合不同的組件或修改現(xiàn)有的組件來構造新的 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)建一個 URL 對象，設置路徑名，然后設置查詢參數(shù)，構造一個新的 URL。然后它將結果轉(zhuǎn)換為字符串以便于閱讀。

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

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

在 JavaScript 中編碼 URL

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

此過程是必要的，因為 URL 中的某些字符（例如空格或符號）可能具有獨特的含義，對它們進行編碼可確保瀏覽器和 Web 服務器正確解釋它們。

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

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

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

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

功能encodeURIComponent()?

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

看看下面的代碼片段及其結果：

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

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

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

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

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

有關該encodeURIComponent()函數(shù)的更多信息，請參閱MDN 文檔。

功能encodeURI()?

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

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

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

讓我們看一些代碼片段。

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

結果與給定的 URL 相同，因為該encodeURI()函數(shù)不對某些字符（例如斜杠、句點和冒號）進行編碼。

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

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

現(xiàn)在，對于更復雜的代碼示例，要編碼的 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”。另一方面，對encodeURIComponent()查詢參數(shù)中的冒號、斜杠和空格字符進行編碼。

有關該encodeURI()函數(shù)的更多信息，請參閱MDN 文檔。

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

需要對 URL 進行編碼的原因

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

在 JavaScript 中解碼 URL

解碼與編碼相反。它恢復編碼 URL 的效果。

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

功能decodeURIComponent()?

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

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

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

此MDN 文檔提供了有關此功能的更多信息。

功能decodeURI()?

該decodeURI()函數(shù)用于解碼整個 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ù)對 URL 查詢參數(shù)進行編碼encodeURI()，并使用該decodeURI()函數(shù)對編碼后的 URL 進行解碼。

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

學習如何在 JavaScript 中對 URL 進行編碼和解碼是一回事；學習如何在 JavaScript 中對 URL 進行編碼和解碼是一回事。了解何時對 URL 進行編碼和解碼是另一回事。

何時對 URL 進行編碼

以下是可能需要對 URL 進行編碼的一些常見場景：

• 生成動態(tài) URL： 如果應用程序動態(tài)生成 URL（例如根據(jù)用戶輸入或數(shù)據(jù)庫值生成鏈接），請確保任何用戶生成的輸入都經(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ù)處理表單提交： 當用戶提交表單數(shù)據(jù)（例如用戶配置文件）時，表單數(shù)據(jù)通常作為查詢參數(shù)包含在 URL 中。如果它包含特殊字符（例如 &、? 或空格），則應在通過 GET 或 POST 請求發(fā)送 URL 參數(shù)之前對其進行編碼。這可以防止由于 URL 中的無效字符導致的意外行為或錯誤，并確保數(shù)據(jù)安全傳輸。

<form action="https://juejin.cn/search">
  <input type="text" name="q" value="hello world">
  <input type="submit" value="Search">
</form>

• 單擊提交按鈕時，表單會將數(shù)據(jù)提交到“https://https://juejin.cn//search”。
• 表單數(shù)據(jù)使用 GET 方法進行編碼并發(fā)送到服務器，因為它是指定 action 屬性時表單提交的默認方法。
• 第一個輸入字段包含值“hello world”。提交表單后，該值將被編碼并作為查詢參數(shù)附加到 URL。例如，編碼后的 URL 可能類似于“https://https://juejin.cn//search?q=hello%20world”。

• 通過 Ajax 請求發(fā)送數(shù)據(jù)： 發(fā)送 Ajax 請求以從服務器檢索數(shù)據(jù)時，通常會在 URL 中包含參數(shù)。這些參數(shù)可能包含特殊字符，因此有必要對 URL 進行編碼，以確保的 Ajax 請求正常工作并避免特殊字符引起的意外問題。

const inputWord = "hello world";
const encodedInputWord = encodeURIComponent(inputWord);
const url = "https://https://juejin.cn//api/search?q=" + encodedInputWord; JAVASCRIPT 

何時解碼 URL

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

• 處理從外部源接收的 URL： 外部源（例如 API 響應、用戶輸入）可以提供編碼的 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： 在應用程序的用戶界面中顯示 URL 時，請確保它們采用原始的、人類可讀的格式。對 URL 進行解碼可確保它們正確地顯示給用戶。

 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，即可獲得結果。

結論

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

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

最新評論