URL編碼（也稱為百分號編碼）是一種使用%XX格式表示URL中特殊字元的機制，其中XX是十六進制值。此編碼對於Web開發、API整合和資料傳輸至關重要。當您需要在URL或查詢參數中包含空格、&符號、問號（?）或非ASCII字元等特殊字元時，正確的編碼可確保資料安全傳輸而不破壞URL結構。該工具支援兩種編碼模式：完整URL編碼（encodeURI）保留URL結構字元如:、/、?、&、=，同時編碼其他特殊字元——適合編碼完整URL。元件編碼（encodeURIComponent）編碼所有特殊字元包括URL結構字元——非常適合查詢參數值、表單資料和API請求負載。所有處理都在瀏覽器的客戶端進行，不向伺服器傳送資料。
How to Use
使用頂部的選項按鈕選擇編碼或解碼模式。編碼時：將文字或URL貼上到輸入區域，輸出會自動更新為編碼結果。選擇空格編碼樣式：%20（標準，符合RFC 3986）或+（常用於查詢字串和表單資料）。切換「編碼完整URL」以在完整URL編碼（保留:、/、?、&、=）和元件編碼（編碼所有內容）之間切換。解碼時：貼上編碼的URL文字，它會自動解碼回可讀格式，處理%20和+兩種空格表示。使用複製按鈕一鍵複製輸出，或將結果下載為文字檔案。
Common Use Cases & Examples
**查詢參數**：將「smart watch」編碼為「smart%20watch」或「smart+watch」用於URL查詢字串。**API請求**：建構API URL如「https://api.example.com/search?q=電子產品%20%26%20小工具&價格=%3E100」，參數正確編碼。**OAuth和簽章**：許多OAuth流程和API簽章演算法需要URL編碼參數。**表單資料**：為application/x-www-form-urlencoded內容類型編碼表單提交。**深度連結**：為行動應用程式建立帶參數的編碼深度連結。**偵錯**：解碼API回應或瀏覽器URL列以檢視實際參數值。**特殊字元**：處理URL中的&、=、?、#、/、@、:、<、>、\"、'、%、+和空格等字元。
Limitations & Important Notes
此工具使用UTF-8編碼（現代Web標準）。不支援非UTF-8編碼。該工具處理標準URL編碼；對於其他編碼方案（如base64或HTML實體），請使用對應的工具。超長URL（>100KB）可能在舊瀏覽器中導致效能問題。解碼模式下的格式錯誤百分號序列（如%ZZ或不完整序列）將觸發錯誤訊息。「編碼完整URL」選項只應用於以http://或https://開頭的完整URL——對於單獨的查詢參數值，請使用元件編碼。請記住，URL編碼會增加文字大小：每個特殊字元變成3個字元（%XX），因此「hello world」（11個字元）變成「hello%20world」（13個字元）。
// JavaScript URL Encoding Examples
// Encode full URL (preserves protocol, slashes, etc.)
const fullUrl = 'https://example.com/search?q=hello world';
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/search?q=hello%20world
// Encode URL component (encodes all special chars)
const queryParam = 'hello world & special chars';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// hello%20world%20%26%20special%20chars
// Build URL with encoded parameters
const baseUrl = 'https://api.example.com/search';
const params = {
q: 'smart watch',
category: 'electronics & gadgets',
price: '>100'
};
const queryString = Object.entries(params)
.map(([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
const fullApiUrl = `${baseUrl}?${queryString}`;
console.log(fullApiUrl);
// https://api.example.com/search?q=smart%20watch&category=electronics%20%26%20gadgets&price=%3E100
// Decode URL
const encoded = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world';
const decoded = decodeURIComponent(encoded.replace(/\+/g, ' '));
console.log(decoded);
// https://example.com/search?q=hello world
// Handle encoding errors
try {
const malformed = '%E0%A4%A'; // Incomplete UTF-8 sequence
const result = decodeURIComponent(malformed);
} catch (error) {
console.error('Invalid URL encoding:', error.message);
}