獲取url參數的方法有三種：1.自定義函數解析，通過分割字符串提取鍵值對并處理編碼；2.使用urlsearchparams對象，通過get和getall方法獲取參數；3.頁面跳轉時通過拼接url或合并新舊參數保留參數。第一種方法需手動處理分割與解碼且無法直接支持多同名參數，但可通過數組存儲解決；第二種方法更簡潔且內置解碼功能；第三種方法在跳轉時動態生成包含舊參數的新url以實現參數保留。
獲取URL參數，簡單來說就是從瀏覽器地址欄里提取問號后面的東西，然后拆解成JS可以用的對象。這事兒看似簡單，但用處可大了，比如頁面跳轉后保留搜索條件，或者根據URL里的ID加載不同的數據。
function getQueryStringParams() { const params = {}; const search = window.location.search.substring(1); // 去掉問號 if (search) { search.split('&').forEach(pair => { const [key, value] = pair.split('='); params[key] = decodeURIComponent(value || ''); // 解碼，處理特殊字符 }); } return params; } const urlParams = getQueryStringParams(); console.log(urlParams.id); // 假設URL里有id參數
這段代碼首先獲取URL的search部分，也就是問號后面的字符串。然后，把它按&分割成鍵值對，再按=分割鍵和值。decodeURIComponent是為了處理URL編碼的字符，比如空格會被編碼成%20。
如何處理URL中多個相同參數名的情況？
有時候，URL里會有多個相同名字的參數，比如?tag=JavaScript&tag=html&tag=css。上面的代碼只能獲取到最后一個tag的值。要處理這種情況，需要稍微修改一下代碼：
立即學習“前端免費學習筆記（深入）”；
function getQueryStringParams() { const params = {}; const search = window.location.search.substring(1); if (search) { search.split('&').forEach(pair => { let [key, value] = pair.split('='); value = decodeURIComponent(value || ''); if (params[key]) { if (Array.isArray(params[key])) { params[key].push(value); } else { params[key] = [params[key], value]; } } else { params[key] = value; } }); } return params; } const urlParams = getQueryStringParams(); console.log(urlParams.tag); // ["javascript", "html", "css"]
這段代碼會檢查params對象里是否已經存在同名的鍵。如果存在，并且已經是一個數組，就直接把新的值push進去；如果存在但不是數組，就把原來的值和新的值一起放到一個數組里。
除了自己寫函數，還有什么更方便的方法獲取URL參數？
現代瀏覽器提供了一個更方便的API：URLSearchParams。用它可以更簡潔地獲取URL參數：
const urlParams = new URLSearchParams(window.location.search); console.log(urlParams.get('id')); // 獲取單個參數 console.log(urlParams.getAll('tag')); // 獲取所有同名參數 // 還可以遍歷所有參數 for (const [key, value] of urlParams.entries()) { console.log(`${key}: ${value}`); }
URLSearchParams的優勢在于它更簡潔，而且已經內置了URL解碼的功能，不需要手動調用decodeURIComponent。
如何在頁面跳轉時保留URL參數？
一個常見的需求是在頁面跳轉后，保持原來的URL參數。比如，從商品列表頁跳轉到商品詳情頁，需要把商品ID傳過去。這可以通過在跳轉鏈接里拼接參數來實現：
<a href="product.html?id=123">查看商品</a>
或者，用JS動態生成URL：
const productId = 123; window.location.href = `product.html?id=${productId}`;
更復雜的情況是，需要在跳轉時合并新的參數和舊的參數。可以先獲取舊的參數，然后合并到新的參數里，再生成新的URL。
function mergeParamsAndredirect(url, newParams) { const urlParams = new URLSearchParams(window.location.search); for (const key in newParams) { urlParams.set(key, newParams[key]); } window.location.href = `${url}?${urlParams.toString()}`; } // 示例：跳轉到product.html，同時保留舊的參數，并添加新的參數 mergeParamsAndRedirect('product.html', { category: 'electronics' });
這種方法可以確保在頁面跳轉后，所有的參數都被保留下來。
