在開發 Web 應用程式時，透過 URL 的 GET 參數傳遞資訊是相當基礎且頻繁的需求。JavaScript 本身提供了 location.search 屬性來獲取查詢字串，但若要進一步解析這些參數，建議使用 URLSearchParams 介面，能更有效率地操作資料。
⚡ 快速跳轉（依實務情境選擇）：
基本用法 (location.search) | 進階解析 (URLSearchParams) | 常見問題 Q&A
基本用法 (location.search)
若只需要獲取 URL 中問號 ? 後面的完整查詢字串，可以直接使用 location.search。
// 假設網址為：https://www.seanacnet.com/page?id=111&category=news
const queryString = location.search;
console.log(queryString);
// 輸出: "?id=111&category=news"此屬性會回傳包含 ? 的原始字串。若要進一步處理這些參數，建議使用下方介紹的 URLSearchParams，避免自行編寫複雜的字串切割邏輯。
進階解析 (URLSearchParams)
URLSearchParams 是現代瀏覽器提供的標準介面，能將查詢字串直接轉換為物件般的迭代器，方便開發者存取特定參數。
將字串轉為物件範例
這是最常見的實作方式，能將 location.search 轉換為可操作的物件：
// 假設網址為：https://www.seanacnet.com/page?id=111&user=sean
const params = new URLSearchParams(location.search);
// 1. 取得特定參數值
console.log(params.get('id')); // 輸出: "111"
console.log(params.get('user')); // 輸出: "sean"
// 2. 檢查參數是否存在
console.log(params.has('id')); // 輸出: true
// 3. 轉為一般物件 (Object)
const paramsObj = Object.fromEntries(params.entries());
console.log(paramsObj);
// 輸出: { id: "111", user: "sean" }若想深入了解更多關於網址物件的操作，可參考站內整理的詳細教學：[JS] Javascript 取得目前 URL 與相關參數(總整理)。
常見問題 Q&A
Q1：如何取得特定參數值？
使用 URLSearchParams.get('key') 即可精準取得對應的值。若參數不存在，則會回傳 null。
Q2：如何處理中文編碼參數？
URLSearchParams 會自動處理編碼問題。若 URL 中包含中文參數（例如 ?name=%E5%B0%8F%E6%98%8E），params.get('name') 會自動解碼並回傳正確的字串 "小明"，無需手動執行 decodeURIComponent。
Q3：如果 URL 有多個相同名稱的參數怎麼辦？
若 URL 為 ?id=1&id=2，使用 params.get('id') 只會取得第一個值 ("1")。若要取得所有值，請使用 params.getAll('id')，它會回傳一個陣列 ["1", "2"]。
發表迴響