作為一名網頁前端開發人員，encodeURI 和 encodeURIComponent 都是 JavaScript 中用於編碼 URI (統一資源標識符) 的函數。它們對於確保某些字符能夠正確地格式化，以便能夠通過網路傳輸至關重要。
然而，這兩者之間有一些關鍵的區別：
| 特點 | encodeURI | encodeURIComponent |
|---|---|---|
| 應用對象 | 完整的URI | 單一的URI組件（如查詢字串、路徑段） |
| 轉義範圍 | 只轉義構成有效 URI 所需的字符 | 轉義在 URI 中有特殊意義的所有字符 |
| 特殊字符 | :, /, ?, &, # | 無 |
| 使用場合 | 當需要編碼整個URI時 | 當需要編碼 URI 的個別組件時 |
encodeURI
- 這個函數用於編碼一個完整的 URI。
- 它會轉義構成有效 URI 所必需的字符。
- 它不會轉義對 URI 有特殊意義的字符，比如
:、/、?、&和#。
encodeURI("https://www.example.com/my page?name=John Doe");
// 輸出: "https://www.example.com/my%20page?name=John%20Doe"encodeURIComponent
- 這個函數用於編碼單個 URI 組件，例如查詢字串或路徑段。
- 它會轉義在 URI 中具有特殊意義的所有字符。
encodeURIComponent("name=John Doe&age=30");
// 輸出: "name%3DJohn%20Doe%26age%3D30"該使用哪一個
- 當你需要編碼一個完整的 URI 時，使用
encodeURI。 - 當你需要編碼一個 URI 組件（如查詢字串、路徑段或查詢字串中的值）時，使用
encodeURIComponent。
以下是一個用於說明區別的範例：
var name = "John Doe";
var age = 30;
var url = "https://www.example.com/search";
// 使用 encodeURI
var completeUrl = encodeURI(url + "?name=" + name + "&age=" + age);
// 輸出: "https://www.example.com/search?name=John%20Doe&age=30"
// 使用 encodeURIComponent
var completeUrl = url + "?name=" + encodeURIComponent(name) + "&age=" + encodeURIComponent(age);
// 輸出: "https://www.example.com/search?name=John%20Doe&age=30"在這個範例中，encodeURI 和 encodeURIComponent 都可以是合適的，具體取決於上下文。然而，對於可能包含如 &、=、?、: 或 / 這些在 URI 中具有特殊意義的字符的各個組件來說，使用 encodeURIComponent 通常更為安全。
相關參考來源
