获取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' });
这种方法可以确保在页面跳转后，所有的参数都被保留下来。
以上就是HTML怎么用JS获取URL参数？queryString解析与应用教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1566525.html
微信扫一扫 
支付宝扫一扫 
