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