開發者工具·URL編碼器和解碼器
encodeURI 與encodeURIComponent：各自保留哪些字符
· 工作原理
url 編碼 JavaScript 開發人員工作流程
這兩個 JavaScript 函數剛好相差 11 個字符，選擇錯誤的函數要嘛會破壞 URL，要嘛無法轉義值。這篇文章詳細說明了這些集合並給出了您可以記住的規則。
搜尋返回了所有內容，因為「R&D」中的 & 分割了查詢——來自錯誤函數的特定錯誤
如果程式碼手動建構 ?q=R&D，搜尋 R&D 可能會意外傳回 R 結果。 & 符號是查詢參數之間的分隔符號；除非您對該值進行編碼，否則它不會保留為 q 的一部分。為該小塊選擇encodeURI 是錯誤，而不是伺服器錯誤。應用程式程式碼中最安全的選項通常是 URLSearchParams，但了解這兩個 JavaScript 原語可以讓現有程式碼更容易偵錯。
這兩個函數的共同點是它們從未接觸過的未保留集合以及它們都應用的 UTF-8 百分比編碼
兩種方法都保留 ASCII 字母、數字和未保留的標點符號 - _ 。 ！ ~ * ' ( ) 在 JavaScript 的編碼規則下保持不變。他們在寫入百分比三元組之前將非 ASCII 字元轉換為 UTF-8 bytes：é 變為 %C3%A9，而不是單一拉丁語-1 byte。他們還將空格編碼為 %20。百分比編碼是為了保留 URI 的結構；它不是 HTML 轉義、輸入驗證或針對接收頁面上的惡意腳本的保護。
僅encodeURI 保留這十一個字元 — ; , / ? : @ & = + $ # 以及為什麼每個在 URL 中都具有結構意義
encodeURI 另外保留了encodeURIComponent 編碼的十一個結構字元： , / ? ：@&=+$#。對於完整的地址，單獨保留斜線和問號可以保留其路徑和查詢語法。對於查詢值，讓 & 或 = 透過將更改參數列表，而未轉義的 # 可以啟動片段。這些函數的不同之處在於，一個函數用於整個位址，另一個函數用於該位址內的元件。
一條規則：值取得encodeURIComponent，完整的URL取得encodeURI——以及為什麼「完整的URL」比聽起來更罕見
值幾乎總是得到encodeURIComponent；對於encodeURI來說，完整的、已經結構化的位址是不太常見的情況。對於以程式設計方式建立的 URL，請使用 URL API 來處理路徑和搜尋參數，而不是連接編碼片段和原始片段的混合。不要使用encodeURIComponent 對整個URL 進行編碼，然後期望斜線和冒號繼續充當分隔符號。相反，不要透過encodeURI 提供使用者的查詢項目並使其與符號保持活動狀態。
工作範例：兩個函數使用相同的字串 — 包含空格、&、/ 和重音符號的值的輸出表
以R&D/café作為一個查詢值。 encodeURIComponent 回傳 R%26D%20%2F%20caf%C3%A9，保護 & 符號和斜線。 encodeURI 傳回 R&D%20/%20caf%C3%A9，保留結構標點符號；一個簡單的 ?q= 前綴現在會建立一個意外的分隔符號。兩者都對空格和重音進行編碼，因此僅使用“hello world”的測試會錯過重要的區別。比較 ToolAcre 中產生的字串，然後將它們貼到 URL 解析器中並檢查出現了多少個查詢參數。
常見錯誤 — 使用encodeURIComponent 對完整 URL 進行編碼，並使用錯誤的對應項進行解碼
將完整 URL 編碼為一個元件會產生 %3A%2F%2F，而消費者期望的是 ://。在驗證之前解碼整個位址可以重新引入具有新意義的保留分隔符號。也要避免對已經包含 %26 的值進行雙重編碼：百分號本身可以變成 %25，因此第二個解碼層可能會再次改變意義。將元件的encodeURIComponent 與decodeURIComponent 配對，並將格式錯誤的百分比轉義視為輸入錯誤。
這不包括什麼 - 使用 + 進行表單編碼，以及使用 URLSearchParams 建立 URL
HTML 表單查詢編碼在 application/x-www-form-urlencoded 中使用加號表示空格，這與這兩個函數的 %20 輸出不同。 URLSearchParams 為您處理這些表單規則。本文不涉及路徑規範化、Unicode 主機名稱轉換或確定解碼後的 URL 是否可以安全請求； URL 編碼是表示步驟，而不是授權策略。
重點：對部分而不是整體進行編碼 — URL 編碼器和解碼器如何顯示兩種模式，以便您可以看到自己輸入的差異
令人難忘的邊界是部分與整體：參數值是一部分，因此請使用encodeURIComponent 或URLSearchParams。 URL 編碼器和解碼器顯示相同字串的兩個瀏覽器功能，並將實驗保持在本地。在確定兩個編碼器可以互換之前，測試包含 &、=、#、斜線和重音符號的輸入。