encodeuri用于編碼完整url，保留結構字符如:、/、?等，適合拼接整個地址時使用；encodeuricomponent用于編碼url參數值，會對=、&、#等特殊字符進行徹底編碼，適合動態拼接參數內容。兩者核心區別在于使用范圍不同：encodeuri處理整體結構安全，encodeuricomponent確保參數值不會干擾解析。例如傳遞帶特殊字符的參數時必須用encodeuricomponent，否則可能導致參數截斷或解析錯誤。正確做法是拼接前對每個參數單獨編碼。
在JavaScript中，encodeURI 和 encodeURIComponent 都是用來對URL進行編碼的函數，但它們的使用場景和處理方式是有區別的。簡單來說：
- encodeURI 用于編碼整個URL；
- encodeURIComponent 用于編碼URL中的某一個參數部分。
下面具體看看它們的區別和適用情況。
encodeURI：保留URL結構字符不編碼
如果你有一個完整的URL，比如 https://example.com?name=張三&city=北京，你想把它作為另一個URL的一部分傳遞出去，這時候應該用 encodeURI。
它會跳過一些URL中具有特殊意義的字符，比如冒號、斜杠、問號、井號等，只對中文、空格這些非ASCII字符進行編碼。
例子：
const url = "https://example.com?name=張三"; console.log(encodeURI(url)); // 輸出: https://example.com?name=%E5%BC%A0%E4%B8%89
適合場景：
- 對完整的URL進行編碼；
- 不想破壞URL本身的結構（如 :、/、? 等）；
- 多用于瀏覽器地址欄拼接時的安全編碼。
encodeURIComponent：編碼更徹底，用于參數值
當你需要把某個參數的值放到URL里，比如你要構造一個帶查詢參數的URL，像 https://example.com?search=用戶輸入的內容，這個時候就應該用 encodeURIComponent。
它會對幾乎所有特殊字符都進行編碼，包括 =、&、# 等，這樣可以避免這些字符影響URL解析。
例子：
const param = "hello world!"; console.log(encodeURIComponent(param)); // 輸出: hello%20world%21
適合場景：
- 編碼URL參數的值；
- 拼接動態內容到URL中；
- 安全地防止特殊字符干擾URL結構。
常見誤區與注意事項
有時候開發者會混淆這兩個方法，導致URL解析出錯。比如：
- ? 錯誤使用 encodeURI 去編碼參數值： 如果參數里有 & 或 =，不會被轉義，可能導致參數被錯誤截斷。
- ? 正確做法是：拼接參數前，每個參數值都應該用 encodeURIComponent 處理。
舉個實際的例子：
const name = "張&三"; const city = "北#京"; // 正確寫法 const url = `https://example.com?name=${encodeURIComponent(name)}&city=${encodeURIComponent(city)}`; // 結果會被正確編碼為： // https://example.com?name=%E5%BC%A0%26%E4%B8%89&city=%E5%8C%97%23%E4%BA%AC
總的來說，區別就在于使用范圍不同：
- encodeURI 是宏觀層面的，用來處理整個URL；
- encodeURIComponent 是微觀層面的，專門處理URL里的具體參數值。
基本上就這些，雖然看起來差不多，但在拼接URL的時候稍不注意就會出問題。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
