URL 編碼:對查詢參數與路徑做百分號編碼

百分號編碼用 %XX 取代不安全字元,讓任意文字能安全放入 URL。掌握要跳脫哪些字元,以及如何把它們解碼還原。

什麼是百分號編碼

URL 中不允許出現的字元會被換成一個百分號加兩個十六進位數字。空白變成 %20,& 變成 %26。

encodeURIComponent 與 encodeURI

對單一查詢值或路徑片段用 encodeURIComponent —— 它會跳脫 /、?、& 與 =。只在整段 URL 上用 encodeURI,因為那些字元在那裡是結構性的,必須保留。

加號與 %20 的陷阱

在查詢字串裡,空白可能出現成加號(form 編碼)或 %20。decodeURIComponent 不會把加號還原成空白,所以解碼 form 資料前要先把加號替換掉。

雙重編碼

對已經編碼過的字串再編碼一次,會把 %20 變成 %2520。如果輸出裡看到 %25 之類的序列,代表這個值被編碼了兩次 —— 反覆解碼直到不再變化為止。

保留字元與未保留字元

RFC 3986 把 URL 字元分成保留字元(gen-delims,如 : / ? #,sub-delims,如 & =)和未保留字元(字母、數字、- . _ ~)。未保留字元永遠不需要編碼;保留字元只有當它們作為值出現、而不是 URL 結構時才需要編碼。

編碼整個 URL 與編碼單一值的差別

encodeURI 用在整段 URL:它會保留 : / ? # & =,讓 URL 結構不變。encodeURIComponent 用在要放進路徑片段或查詢參數的單一值 —— 它會跳脫那些結構字元,避免值越界到 URL 的其他位置。

用程式安全地組出查詢字串

優先使用 URLSearchParams(瀏覽器)或 url.URLSearchParams(Node),不要直接字串串接。這兩個 API 會正確編碼鍵與值、支援多值參數,並避免最常見的錯誤 —— 忘了編碼一個剛好含有 & 或 = 的參數。