如何使用 JavaScript 函式編碼 URL？

眾所周知，URL 是一個網址。什麼是 URL 編碼，為什麼我們需要對URL進行編碼？將字串轉換為準確的 URL 格式的過程稱為 URL 編碼。

有效的 URL 格式僅使用“字母 | 數字 | 安全 | 附加 | 轉義”字元。URL 中只允許使用有限的標準128 個 ASCII字元。需要加密不屬於此集合的保留字元。URL 編碼提高了 URL 的可靠性和安全性。

每個需要 URL 編碼的字元都使用字元“%”和與其 utf-8 字元對應的兩位十六進位制值進行編碼。

例如，

¥€¢£¥€¢£^°√•
will be encoded to
C2%A5%E2%82%AC%C2%A2%C2%A3%C2%A5%E2%82%AC%C2%A2%C2%A3%5E%C2%B0%E2%88%9A%E
2%80%A2

使用 encodeURI() 方法

在本節中，讓我們檢查 encodeURI() 方法以在 JavaScript 中編碼 URL。encodeURI() 是編碼 URL 的通用方法。唯一的缺點是此方法不編碼字元~!@#$&*()=:/,;?+ 在這種情況下，我們採用另一種方法。

語法

請按照以下語法使用此方法。

encodeURI(uri)

在 encodeURI() 的語法中，我們需要傳送一個引數，該引數將是要編碼的 URL 或字串。

演算法

  • 步驟 1 - 定義一個執行編碼的函式。

  • 步驟 2 - 根據編碼的需要，將 URL 字串作為引數傳遞給函式。也就是說，根據方法的編碼能力。

  • 步驟 3 - 顯示輸出。

示例

在此示例中，我們使用一個函式來執行 encodeURI()。正如我們上面學到的那樣，我們根據方法的工作方式傳遞了 URL 字串。

<html>
<body>
   <h2>Using the <i>encodeURI()</i> method.</h2>
   <p id="idEnOutput"></p>
   <script>
      function doEncode(str) {
         var encode, dispEl, disStr = "encodeURI";
         dispEl = document.getElementById("idEnOutput");
         encode = encodeURI(str);
         dispEl.innerHTML = disStr + "<br>" + encode;
      }
      doEncode("https://tutorialspoint.tw/check doc?qp=abc and xyz&count=1");
   </script>
</body>
</html>

使用 encodeURIComponent() 方法

在本節中，讓我們檢查encodeURIComponent() 方法以在 JavaScript 中編碼 URL。encodeURI() 是編碼 URL 的通用方法。

並且諸如 / ? : @ & = + $ * # 和類似字元不會被 encodeURI() 方法編碼。作為替代方法，使用 encodeURIComponent() 函式。但是，諸如 A-Z a-z 0-9 - _.! ~ * ' () 等字元不會被 encodeURIComponent 方法編碼。

語法

encodeURIComponent(uri)

在encodeURIComponent() 的語法中，我們需要傳送一個引數，該引數將是要編碼的 url 或字串。

示例

在此示例中，我們使用一個函式來執行encodeURIComponent()。正如我們上面學到的那樣，我們根據方法的工作方式傳遞了 URL 字串。

<html>
<body>
   <h2>Using the <i>encodeURIComponent()</i> method.</h2>
   <p id="idEnOutput"></p>
   <script>
      function doEncode(str) {
         var encode, dispEl, disStr = "encodeURIComponent";
         dispEl = document.getElementById("idEnOutput");
         encode = encodeURIComponent(str);
         dispEl.innerHTML = disStr + "<br>" + encode;
      }
      doEncode("qstr?qtxt=me@gmail.com");
   </script>
</body>
</html>

在本教程中，我們看到了在 JavaScript 中編碼 URL 的兩種方法。

與 encodeURIComponent() 方法相比，encodeURI() 方法更好。因為 encodeURIComponent() 會對整個 URL 以及域名進行編碼。這會產生無效的 URL。因此，只有當我們需要編碼 encodeURI() 方法不會編碼的字元時，才能使用此方法。

更新於：2022年8月23日

2K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告