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 進行編碼。

相關文章 - JavaScript Encoding

  • 在 JavaScript 中將字串編碼和解碼為 Base64