URL拼接的JavaScript语法问题：如何将orderB.id嵌入href属性

嘿，我一眼就看出你代码里的问题啦——是字符串拼接的语法逻辑出错了！你把JS的字符串拼接符号+写到HTML标签的属性引号里面了，导致orderB.id没有被正确解析成URL的一部分。

错误原因分析 #

原代码里的这一行：

row += "<td><a href='/update/' + orderB.id + >Update</a></td>";

这里的+ orderB.id +是JS的拼接语法，但你把它放在了HTML的href属性引号内部，浏览器会把它当成字符串的一部分，而不是JS变量拼接，自然达不到预期效果。

两种修复方案 #

方案1：修复传统字符串拼接写法

调整引号和拼接符号的位置，把orderB.id正确拼接到URL路径里：

var output = results.reduce(function (orderA, orderB){ 
  var row = "<tr>"; 
  row += "<td>" + orderB.name + "</td>"; 
  row += "<td>" + orderB.type + "</td>"; 
  row += "<td>" + orderB.id + "</td>"; 
  // 正确拼接href属性值
  row += "<td><a href='/update/" + orderB.id + "'>Update</a></td>"; 
  return orderA + row; 
},"")

这样拼接后，最终生成的HTML会是类似<a href='/update/123'>Update</a>的格式（假设orderB.id为123）。

方案2：使用ES6模板字符串（更推荐）

模板字符串用反引号`包裹，变量直接用${变量名}嵌入，写法更直观，不容易出错：

const output = results.reduce((orderA, orderB) => { 
  const row = `
    <tr>
      <td>${orderB.name}</td>
      <td>${orderB.type}</td>
      <td>${orderB.id}</td>
      <td><a href='/update/${orderB.id}'>Update</a></td>
    </tr>
  `; 
  return orderA + row; 
}, "")

这种写法不仅可读性更高，还能避免引号嵌套的麻烦。

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