如何使用 JavaScript 函式解碼 URL？

在本教程中，我們將學習如何使用 JavaScript 解碼 URL。

URL 是 統一資源定位符 的縮寫。URL 是某個網站的地址。原則上，每個有效的 URL 都連結到不同的資源。這些資源包括 HTML 頁面、CSS 文件、圖片等。

在實踐中，有幾個例外情況，最常見的是 URL 連結到不再存在或已遷移的資源。由於 Web 伺服器同時處理 URL 表示的資源和 URL 本身，因此由 Web 伺服器的所有者負責正確管理該資源及其關聯的 URL。

URL 編碼是指將 URL 中的某些字元替換為一個或多個字元三元組，這些字元三元組由百分號“%”後跟兩位十六進位制數字組成。三元組的兩位十六進位制數字表示替換字元的數值。URL 編碼的反向過程是 URL 解碼。

在使用查詢引數向 API 發出 GET 請求時，編碼和解碼 URL 和 URL 元件是 Web 開發中的一項常見活動。通常，會構建包含查詢引數的 URL 字串，並且響應伺服器必須解碼此 URL 以理解它。瀏覽器會自動編碼 URL，在發出請求之前將某些特殊字元轉換為其他保留字元。

以下是使用 JavaScript 函式解碼 URL 的方法。

使用 decodeURI() 方法

decodeURI() 方法解碼由 encodeURI() 建立的 URI。此函式接受一個引數，該引數包含要解碼的字串。此函式返回解碼後的字串（原始字串）。

當編碼的 URL 包含不正確的字元序列時，會丟擲 URIError（“格式錯誤的 URI 序列”）異常。它使用它所表示的字元替換編碼的 URI 中的每個轉義序列，但不解碼 encodeURI 可能無法引入的轉義序列。轉義序列不會解碼字元 #。

語法

const decodedURL = decodeURI(url);

decodeURI() 函式接收 URL 的輸入並對其進行解碼。該值儲存在變數 decodedURL 中。

示例

在此示例中，我們獲取了編碼 URL 的輸入。使用 decodeURI() 函式解碼 URL，並在使用者螢幕上列印解碼後的 URL。

<html>
<body>
   <h2> Decode a URL using <i> decodeURI() </i> function </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const url =
      `https://www.google.com/search?q=facebook&rlz=1C1RLNS_enIN812IN812&oq=fac
      ebook&aqs=chrome..69i57j46i131i199i433i465i512j0i131i433i512l4j0i512j0i13
      1i433i512j0i131i433j0i271.4255j0j15&sourceid=chrome&ie=UTF-8`;
      const decodedURL = decodeURI(url);
      root.innerHTML = decodedURL;
   </script>
</body>
</html>

使用 decodeURIComponent() 方法

decodeURIComponent() 方法解碼之前由 encodeURIComponent 或類似過程生成的 URI 元件。解碼後的指定編碼統一資源識別符號 (URI) 元件作為新字串返回。此方法接受一個包含編碼字串的引數。

此方法返回 URL 字串的解碼元件。如果使用不當，它會引發 URIError（“格式錯誤的 URI 序列”）錯誤。編碼的 URL 元件中的每個轉義序列都替換為它所表示的字元。

語法

const decodedComponent = decodeURIComponent(component);

decodeURIComponent() 函式接收 URL 元件輸入並對其進行解碼。該值儲存在變數 decodedComponent 中。

示例

在此示例中，編碼 URL 的一個元件作為輸入儲存在 component 變數中。% 符號表示該元件已編碼。decodeURIComponent() 函式解碼 URL 元件，這會刪除百分號並顯示它們之間的字串。解碼後的元件在使用者螢幕上列印。

<html>
<body>
   <h2> Decode a URL using <i> decodeURIComponent() </i> Method </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const component = "Tutorials%20Point%20Simply%20Easy%20Learning"
      const decodedComponent = decodeURIComponent(component);
      root.innerHTML = decodedComponent;
   </script>
</body>
</html>

使用 unescape() 方法

unescape() 方法透過用它所表示的字元替換十六進位制轉義序列來建立一個新字串。可以使用類似 escape 的函式來引入轉義序列。一個新字串，其中某些字元未轉義。

unescape 函式是全域性物件屬性。此方法僅解碼特殊字元；它已棄用。@ - +. / * _ 是例外字元。

語法

const decodedurl = unescape(encodedURL);

unescape() 函式接收編碼 URL 的輸入並解碼其字元。該值儲存在“decodedurl”變數中。

示例

在此示例中，給定一個 URL 作為輸入。此 URL 使用 encodeURI() 函式進行編碼並存儲在 encodedURL 變數中。escape() 函式將單個字串作為引數並對其進行編碼，以便可以透過支援 ASCII 字元的計算機網路傳輸。然後，使用 JavaScript 的 unescape() 函式解碼 URL。此解碼後的 URL 在使用者螢幕上列印。

<html>
<body>
   <h2> Decode a URL using <i> unescape() </i> Method </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const url = "https://www.twitter.com";
      const encodedURL = encodeURI(url);
      const escapeurl = escape(url);
      const decodedurl = unescape(encodedURL);
      root.innerHTML = decodedurl;
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用 JavaScript 函式解碼統一資源定位符。本教程解釋了三個 JavaScript 函式，即 decodeURI() 函式、decodeURIComponent() 函式和 unescape() 函式。這些函式用於在 JavaScript 中解碼 URL。

更新於: 2022-10-25

889 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告