JavaScript 中的 URL 編碼

1. URI 和 URL 有什麼區別
2. 在 JavaScript 中使用 encodeURI() 方法對 URL 進行編碼
3. 在 JavaScript 中使用 encodeURIComponent() 方法對 URL 進行編碼

URL 編碼是在 URL 中用 % 後跟一個十六進位制字元對 8 位字元進行編碼的過程。它也被稱為百分比編碼，因為我們用百分號替換字元。URL 編碼可以使用幾乎任何程式語言完成，包括 JavaScript。

對 URL 進行編碼的原因是 URL 只能包含 ASCII 表中的特定字元。URL 中存在的所有其他字元都需要進行編碼才能使 URL 正常工作。URL 中需要編碼的字元有':'、'/'、'?'、'#'、'['、']'、'@'、'!'、'$', '&', "'", '(', ')', '*', '+'、','、';'、'=', 以及 '%'。有關這些字元及其編碼形式的更多資訊，你可以訪問此連結。

URI 和 URL 有什麼區別

在繼續之前，讓我們先了解一下 URI 和 URL。

統一資源識別符號 (URI) 用於標識 Internet 上的資源。相比之下，統一資源定位器 (URL) 可以幫助你定位和訪問該資源。

URI 既可以是識別符號也可以是定位器，而 URL 只能是定位器。URL 位於 URI 下；因此，它們聽起來有點相似，但它們之間有細微的差別。

例如，facebook.com 是一個 URL，因為它獲取 Facebook 網頁所在的位置，而附近的咖啡店可以是 URI，因為你知道咖啡店（這是一種資源）的位置，並且你也知道如何獲取那裡（路徑）。

在 JavaScript 中使用 encodeURI() 方法對 URL 進行編碼

encodeURI() 方法是可用於在 JavaScript 中對 URL 進行編碼的方法之一。如果你有完整的 URL，則可以使用此方法。

假設我們有一個 URL 為 https://en.wikipedia.org/[$q=english &language]，現在讓我們使用 encodeURI() 方法對這個 URL 進行編碼，看看這個方法提供了什麼輸出。

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURI(URL));

輸出：

https://en.wikipedia.org/%5Bq=english%20&language%5D

請注意，此方法僅對 URL 中的少數字符（如空格和方括號）進行編碼。

此方法不會對以下特殊字元進行編碼。

encodeURI() ` will not encode: ` ~!@#$ & * () =: /,;?+'

如果要對其他一些特殊字元進行編碼，可以使用 encodeURIComponent() 方法。

在 JavaScript 中使用 encodeURIComponent() 方法對 URL 進行編碼

encodeURIComponent() 方法也可用於對 URL 進行編碼。如果你只有 URL 的一部分，則可以使用此方法。正如我們已經看到的，encodeURI() 方法編碼的字元非常少，但是如果你也想編碼其他一些字元，你可以使用 encodeURIComponent() 方法。

讓我們採用之前採用的相同 URL，看看當我們使用這種方法對字串進行編碼時，我們得到了什麼輸出。

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURIComponent(URL));

輸出：

https%3A%2F%2Fen.wikipedia.org%2F%5B%24q%3Denglish%20%26language%5D

如你所見，此方法已對大部分 URL 進行了編碼。

此方法不會對以下特殊字元進行編碼。

encodeURIComponent() ` will not encode: ` ~! * ()'

根據你的要求和使用情況，你可以使用上述兩種方法中的一種或兩種在 JavaScript 中對 URL 進行編碼。