有沒有貼過一條連結,發現本該是文字的地方變成 %E4%B8%AD,或某個查詢參數莫名壞掉?那就是 URL 編碼在運作。搞懂它,那些看不懂的字串就變成你能推理的東西。
為什麼網址需要編碼
網址只能包含有限的 ASCII 字元。其他任何東西 —— 空白、中文,或像 ?、&、#、/ 這種有特殊意義的字元 —— 都必須做百分比編碼:用 % 加上該位元組的兩位十六進位值取代。例如空白變成 %20,中(UTF-8)變成 %E4%B8%AD。
你可以用 URL 編碼工具即時編碼或解碼任何字串。
保留字元 vs 非保留字元
- 非保留字元(
A–Z a–z 0–9 - _ . ~)永遠不需編碼。 - 保留字元(
: / ? # [ ] @ ! $ & ' ( ) * + , ; =)在網址中有結構意義。要不要編碼看情境 —— 在「值」裡面必須編碼,當「結構」則不能編碼。
這正是 encodeURIComponent 與 encodeURI 差別的核心。
encodeURIComponent vs encodeURI
encodeURIComponent連保留字元也編碼。用於單一值 —— 一個查詢參數、一個路徑片段。encodeURI保留結構字元(/ ? & =)。用於你不想拆散的整條網址。
encodeURIComponent("a b&c=d") // "a%20b%26c%3Dd" ✅ 當值很安全
encodeURI("https://x.com/a b") // "https://x.com/a%20b" ✅ 整條網址選錯是常見 bug 來源:對一個值用了 encodeURI,裡面的 & 不會被跳脫,就會破壞你的查詢字串。
%20 vs +
兩者都能代表空白,但用在不同情境。在網址路徑與現代查詢字串中,標準是 %20。用 + 代表空白源自較舊的 application/x-www-form-urlencoded 格式(HTML 表單送出用)。不確定時,%20 是安全、通用的選擇 —— 也是我們工具產生的格式。
經典的「重複編碼」bug
如果一個字串被編碼兩次,%20 會變成 %2520(因為 % 自己被編碼成 %25)。症狀:瀏覽器裡出現字面的 %20,或空白變成 %2520。解法是剛好只編碼一次 —— 不確定輸入狀態就先解碼。用解碼工具可以輕鬆檢視你手上到底是什麼。
快速對照
- 編碼參數值?→
encodeURIComponent。 - 編碼整條網址?→
encodeURI。 - 看到零星的
%XX?→ 解碼它讀出原文。
用免費的 URL 編碼 / 解碼工具即時編碼與解碼網址與查詢參數 —— 全程在瀏覽器本機執行。