如何在JavaScript中通过URL传递多个变量？

DevOps 小满

2026-5-27

解决多变量URL传递的问题

Hey there! 恭喜你已经搞定单变量的页面传递啦——咱们来一起修复多变量传递遇到的问题。

先拆解下你当前代码的问题所在：

缺少参数分隔符与参数名：URL查询参数必须遵循 key1=value1&key2=value2&key3=value3 的格式。你现在的代码只是把所有值直接拼接到id参数后面，导致所有值都混在了一个混乱的字符串里。
undefined值出现：结果里的undefined说明dataset[0].Var_Class要么不存在（可能是属性名拼写错误，比如大小写问题？），要么没有被赋值。

这里给你一个修复后的代码版本，能解决这两个问题：

function openPage() {
  // 先安全获取变量，用空字符串兜底避免出现undefined
  const varName = dataset[0].Var_Name ?? '';
  const varClass = dataset[0].Var_Class ?? '';
  const varInstance = dataset[0].Var_Instance ?? '';

  // 按照正确的URL参数结构拼接地址
  const targetUrl = `datapage_test.html?id=${varName}&class=${varClass}&instance=${varInstance}`;
  window.open(targetUrl);
}

核心优化点：

规范参数格式：每个变量都有自己的命名参数（id、class、instance），用&分隔，最终生成的URL会是这样的：
```
file:///C:/*path*/datapage_test.html?id=UK_Wakefield&class=你的类值&instance=UK
```
安全取值：使用空值合并运算符(??)确保如果某个属性不存在，就用空字符串代替，避免undefined污染URL。
可读性提升：把URL构建拆分成单独步骤，后续调试起来更方便。