URL 編碼也叫百分號編碼，它讓 URL 可以安全攜帶空格、中文、Emoji、符號和保留字元，同時不破壞 URL 本身的結構。

如果你複製連結時見過 %20、%2F、%3F、%E4%B8%AD 或 %F0%9F%98%80，那就是 URL 編碼。它看起來不直觀，但解決的是一個很實際的問題：URL 不只是普通文字，?、&、=、/、# 這些字元在 URL 中都有結構含義。

URL 編碼為什麼存在

一個 URL 通常會被拆成協定、網域、路徑、查詢字串和片段：

https://example.com/search?q=hello%20world&page=1#results

在這個 URL 裡：

  • https 是協定。
  • example.com 是網域。
  • /search 是路徑。
  • q=hello%20world&page=1 是查詢字串。
  • results 是片段。

如果查詢參數裡包含空格、&、斜線、中文或 Emoji，瀏覽器和伺服器就需要一種穩定方式表示它。百分號編碼會把字元的 UTF-8 位元組轉換成 % 加兩個十六進位數字。

常見字元編碼表

字元編碼
空格%20
/%2F
?%3F
&%26
=%3D
#%23
中%E4%B8%AD

空格通常會顯示為 %20。但在 application/x-www-form-urlencoded 表單資料裡，空格也可能顯示為 +。當開發者在表單、URL 和 API 用戶端之間複製參數時，這個差異很容易導致解碼結果不一致。

encodeURI 和 encodeURIComponent 的差別

JavaScript 裡最常見的兩個編碼函式是 encodeURI() 和 encodeURIComponent()。它們名字很像，但使用情境不同。

當你已經有一個完整 URL，只想編碼其中不安全的字元時，可以使用 encodeURI()：

const url = 'https://example.com/search?q=hello world'

encodeURI(url)
// https://example.com/search?q=hello%20world

當你要編碼一個 URL 組件，尤其是查詢參數值時，應該使用 encodeURIComponent()：

const value = 'hello world & JSON'

encodeURIComponent(value)
// hello%20world%20%26%20JSON

差別在於，encodeURI() 會保留 ?、&、/、= 等 URL 保留字元。對於完整 URL 來說這很合理，但如果它們出現在查詢參數值裡，就可能破壞參數結構。

查詢參數範例

假設你想建構這個搜尋位址：

https://example.com/search?q=hello world & JSON&page=1

如果 q 的值沒有編碼，搜尋詞裡的 & 可能會被當成新參數的開始。更安全的寫法是：

const q = 'hello world & JSON'
const url = `https://example.com/search?q=${encodeURIComponent(q)}&page=1`

結果是：

https://example.com/search?q=hello%20world%20%26%20JSON&page=1

這樣伺服器會收到一個完整的 q 參數，而不是錯誤地把搜尋詞拆成多個參數。

巢狀 URL 和跳轉參數

另一個常見情境是把完整 URL 放進某個查詢參數裡，例如登入後跳轉位址：

const next = 'https://example.com/dashboard?tab=billing&plan=pro'
const loginUrl = `/login?next=${encodeURIComponent(next)}`

這裡的巢狀 URL 必須按組件編碼。如果不編碼，&plan=pro 可能會被當成 /login 的參數，而不是 next 值的一部分。

常見 URL 編碼問題

當連結或 API 呼叫行為異常時，可以重點檢查這些問題：

  • 查詢參數值裡包含 & 或 =，但沒有編碼。
  • 把完整 URL 傳給了 encodeURIComponent()，導致整個連結變成不可讀的編碼文字。
  • 參數被重複編碼，導致 %20 變成 %2520。
  • 表單把空格表示為 +，但接收方只按 %20 處理。
  • Base64 字串裡包含 +、/ 或 =，直接放進 URL 後被誤解析。
  • JSON 字串沒有先編碼，就被放進查詢參數。

重複編碼尤其容易被忽略。如果你看到 %252F，解碼一次可能得到 %2F，再解碼一次才是 /。

親自測試

你可以使用下面的工具測試編碼和解碼結果：

如果要整理結構化查詢字串，可以使用 URL 參數工具。如果查詢參數裡包含 JSON，解碼後再用 JSON 格式化工具 校驗。如果參數值是 Base64，可以先用 Base64 工具 檢查，再放進 URL 裡傳輸。