CleanMyMac

encodeURI vs encodeURIComponent，簡單解說 URI 編碼

Feature image for encodeURI vs encodeURIComponent，簡單解說 URI 編碼

作為一名網頁前端開發人員，encodeURI 和 encodeURIComponent 都是 JavaScript 中用於編碼 URI（統一資源標識符）的函數。它們對於確保某些字符能夠正確地格式化，以便能夠通過網路傳輸至關重要。

雖然這兩個函數看起來很相似，但它們之間有一些關鍵的區別，了解這些區別對於正確處理 URL 和查詢參數非常重要。

特點encodeURIencodeURIComponent
應用對象完整的URI單一的URI組件（如查詢字串、路徑段）
轉義範圍只轉義構成有效 URI 所需的字符轉義在 URI 中有特殊意義的所有字符
特殊字符:, /, ?, &, #無
使用場合當需要編碼整個URI時當需要編碼 URI 的個別組件時

encodeURI 與 encodeURIComponent 的詳細說明

encodeURI

encodeURI 函數用於編碼一個完整的 URI，它會轉義構成有效 URI 所必需的字符，但不會轉義對 URI 有特殊意義的字符，比如 :、/、?、& 和 #。

這意味著它會保留 URI 的結構，只編碼那些可能導致問題的字符（如空格）。

使用範例：

encodeURI("https://www.example.com/my page?name=John Doe");
// 輸出: "https://www.example.com/my%20page?name=John%20Doe"

在這個例子中，空格被編碼為 %20，但 URI 的特殊字符（如 ?、=）保持不變，因為它們是 URI 結構的一部分。

encodeURIComponent

encodeURIComponent 函數用於編碼單個 URI 組件，例如查詢字串參數、路徑段或查詢字串中的值。它會轉義在 URI 中具有特殊意義的所有字符，包括 :、/、?、&、= 和 # 等。

這使得它非常適合編碼那些將作為 URI 一部分的值，確保這些值不會破壞 URI 的結構。

使用範例：

encodeURIComponent("name=John Doe&age=30");
// 輸出: "name%3DJohn%20Doe%26age%3D30"

在這個例子中，所有特殊字符都被編碼了：= 變成 %3D，空格變成 %20，& 變成 %26。

該使用哪一個？

選擇使用哪個函數取決於你要編碼的內容：

  • 使用 encodeURI：當你需要編碼一個完整的 URI 時使用。它會保留 URI 的結構，只編碼必要的字符。
  • 使用 encodeURIComponent：當你需要編碼一個 URI 組件（如查詢字串參數、路徑段或查詢字串中的值）時使用。它會編碼所有特殊字符，確保這些值不會破壞 URI 的結構。

以下是一個用於說明兩者區別的實際範例：

var name = "John Doe";
var age = 30;
var url = "https://www.example.com/search";

// 方法一：使用 encodeURI（不推薦用於查詢參數）
var completeUrl1 = encodeURI(url + "?name=" + name + "&age=" + age);
// 輸出: "https://www.example.com/search?name=John%20Doe&age=30"
// 注意：如果 name 或 age 包含特殊字符（如 &、=），可能會破壞 URI 結構

// 方法二：使用 encodeURIComponent（推薦用於查詢參數）
var completeUrl2 = url + "?name=" + encodeURIComponent(name) + "&age=" + encodeURIComponent(age);
// 輸出: "https://www.example.com/search?name=John%20Doe&age=30"
// 這樣可以確保所有特殊字符都被正確編碼

重要提醒：

在這個範例中，雖然兩種方法在這個簡單的情況下都能產生相同的結果，但當查詢參數的值包含特殊字符時，使用 encodeURIComponent 會更加安全。

例如，如果 name 的值是 "John & Jane"，使用 encodeURI 可能會產生錯誤的 URI，因為 & 會被視為查詢參數的分隔符。而使用 encodeURIComponent 則會正確地將 & 編碼為 %26，確保 URI 的正確性。

最佳實踐：

  • 編碼完整的 URI 時，使用 encodeURI
  • 編碼 URI 的個別組件（特別是查詢參數的值）時，使用 encodeURIComponent
  • 當不確定時，使用 encodeURIComponent 通常更安全

總結

encodeURI 和 encodeURIComponent 都是處理 URI 編碼的重要工具，但它們的使用場景不同。記住以下要點：

  • encodeURI 用於編碼完整的 URI，保留 URI 的特殊字符
  • encodeURIComponent 用於編碼 URI 的個別組件，編碼所有特殊字符
  • 編碼查詢參數時，優先使用 encodeURIComponent 以確保安全性

正確使用這兩個函數可以避免許多與 URL 處理相關的錯誤，讓你的程式碼更加穩健。

相關參考來源