在前端开发中，不同HTML页面之间需要传递数据是常见需求，URL查询参数就是一种无需后端介入、实现简单的传参方案，适合传递少量非敏感数据。
URL查询参数的基本结构
URL查询参数拼接在页面地址的问号?之后，多个参数之间用&分隔，每个参数的格式为参数名=参数值。例如跳转到用户详情页时，传递用户ID的URL格式如下：
https://ipipp.com/user.html?userId=1001&type=vip
上面的URL中包含了两个查询参数，分别是userId和type，对应的值分别是1001和vip。
源页面拼接查询参数
在源页面中，我们可以通过修改window.location.href来实现页面跳转并携带查询参数，拼接时需要注意对参数值进行编码，避免特殊字符导致解析错误。
参数编码的必要性
如果参数值包含中文、空格、特殊符号等，直接拼接可能会出现乱码或者解析异常，因此需要使用encodeURIComponent()方法对参数值进行编码。
拼接示例代码
以下是一个从列表页跳转到详情页并传递商品ID和商品名称的示例：
// 源页面：商品列表页 list.html
// 商品ID和商品名称
const productId = 205;
const productName = "无线蓝牙耳机";
// 对参数值进行编码，避免特殊字符问题
const encodedName = encodeURIComponent(productName);
// 拼接带查询参数的URL
const targetUrl = `https://ipipp.com/detail.html?productId=${productId}&productName=${encodedName}`;
// 跳转到目标页面
window.location.href = targetUrl;
目标页面解析查询参数
目标页面需要获取URL中的查询参数并解析，首先可以通过window.location.search获取问号后的查询字符串，再进行拆分处理。
手动解析查询参数
手动解析的逻辑是先去掉查询字符串开头的问号，再按&拆分每个参数，最后按=拆分参数名和参数值，同时要对参数值进行解码。
// 目标页面：商品详情页 detail.html
// 获取查询字符串，例如 "?productId=205&productName=%E6%97%A0%E7%BA%BF%E8%93%9D%E7%89%99%E8%80%B3%E6%9C%BA"
const queryString = window.location.search;
// 存储解析后的参数对象
const params = {};
if (queryString) {
// 去掉开头的问号
const str = queryString.substring(1);
// 按&拆分每个参数
const paramArr = str.split("&");
paramArr.forEach(item => {
// 按=拆分参数名和参数值
const [key, value] = item.split("=");
// 对参数值进行解码，存入对象
params[key] = decodeURIComponent(value);
});
}
// 使用解析后的参数
console.log("商品ID：", params.productId); // 输出 205
console.log("商品名称：", params.productName); // 输出 无线蓝牙耳机
使用URLSearchParams API解析
现代浏览器提供了URLSearchParams API，可以更便捷地解析查询参数，无需手动处理拆分逻辑。
// 目标页面：商品详情页 detail.html
// 创建URLSearchParams实例
const searchParams = new URLSearchParams(window.location.search);
// 获取指定参数的值，自动完成解码
const productId = searchParams.get("productId");
const productName = searchParams.get("productName");
console.log("商品ID：", productId); // 输出 205
console.log("商品名称：", productName); // 输出 无线蓝牙耳机
// 遍历所有参数
searchParams.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
使用注意事项
- URL查询参数会暴露在地址栏中，因此不要传递密码、 token 等敏感数据。
- 不同浏览器对URL的长度有限制，通常不建议传递超过2048字符的数据，大量数据建议使用本地存储传递。
- 参数值如果包含特殊字符，一定要进行编码和解码操作，避免解析错误。
- 如果需要在单页应用中使用查询参数，也可以参考上述解析逻辑，结合路由库的相关API实现。
常见问题解答
参数值为空怎么处理
如果URL中某个参数没有值，比如?productId=，使用URLSearchParams.get()会返回空字符串，手动解析时也会得到空值，使用时需要做好空值判断。
同一个参数出现多次怎么处理
如果URL中同一个参数出现多次，比如?tag=book&tag=music，URLSearchParams.get()只会返回第一个值，如果需要获取所有值，可以使用getAll()方法，返回数组形式的所有值。
// URL为 https://ipipp.com/page.html?tag=book&tag=music
const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get("tag")); // 输出 book
console.log(searchParams.getAll("tag")); // 输出 ["book", "music"]
URL查询参数HTML页面传参JavaScript页面数据传递前端开发修改时间：2026-06-19 05:36:32