JavaScript中如何将selectedItemId变量拼接至location.href的URL参数中

我来帮你搞定这个URL拼接的问题！你需要把selectedItemId变量作为查询参数加到Thymeleaf生成的基础URL里，下面是两种可靠的实现方式，还会帮你排查可能踩坑的点：

方式一：模板字符串直接拼接（简单直观） #

这种写法适合参数不多的场景，代码清晰易懂：

// 全局变量，由其他函数赋值
var selectedItemId = null;

function editLink() {
  // 先做参数校验，避免空值跳转
  if (selectedItemId === null) {
    alert('请先选择一个合同项哦！');
    return;
  }
  // 获取Thymeleaf生成的基础URL
  const baseEditUrl = /*[[@{/supplycontracts/edit/}]]*/ '';
  // 用模板字符串拼接参数，生成完整URL
  location.href = `${baseEditUrl}?contractId=${selectedItemId}`;
}

方式二：使用URLSearchParams（更严谨） #

如果后续可能添加更多参数，或者需要处理特殊字符（比如参数值里有&、=等），推荐用URLSearchParams，它会自动帮你处理编码问题：

var selectedItemId = null;

function editLink() {
  if (selectedItemId === null) {
    alert('请先选择一个合同项哦！');
    return;
  }
  const baseEditUrl = /*[[@{/supplycontracts/edit/}]]*/ '';
  // 创建URL对象
  const targetUrl = new URL(baseEditUrl);
  // 添加查询参数
  targetUrl.searchParams.append('contractId', selectedItemId);
  // 跳转
  location.href = targetUrl.toString();
}

你之前写法失败的可能原因 #

• 没有校验selectedItemId是否已赋值：如果变量还是null，拼接后会生成?contractId=null，可能不符合后端预期
• 字符串拼接语法错误：比如没用模板字符串（`），而是用了单引号/双引号直接拼接，导致变量没有被解析
• Thymeleaf表达式没有正确生成基础URL：可以先console.log(baseEditUrl)看看输出是否是你预期的/myApp/supplycontracts/edit/

另外，记得测试前先确认其他函数已经给selectedItemId赋了正确的数值哦，可以在editLink开头加一句console.log(selectedItemId)来排查变量值是否正确。

内容的提问来源于stack exchange，提问作者hooch