获取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传过去。这可以通过在跳转链接里拼接参数来实现：
查看商品
或者，用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' });这种方法可以确保在页面跳转后，所有的参数都被保留下来。
