创建动态<tr>时JavaScript模板解析出现undefined问题

你遇到的问题根源在于**forEach方法本身没有返回值**——它只是遍历数组执行回调逻辑，默认返回undefined，所以当你直接把req.body.serviceObj.forEach(...)拼接到模板字符串里时，这部分就会被替换成undefined，导致模板解析出问题。

解决这个问题的最佳方案是改用map方法，它会遍历数组并返回一个由回调返回值组成的新数组，最后我们再用join('')把数组里的所有<tr>字符串拼接成一个完整的片段，就能完美嵌入到模板里了。

修正后的代码示例： #

const emailTemplate = `
<table style="border:none;">
  <tbody>
    <tr>
      <th>Service Name</th>
      <th align="right" style="width:100px;">Quantity</th>
    </tr>
    ${req.body.serviceObj.map(element => `
    <tr>
      <td>${element.selectedService.Service}</td>
      <td align="right" style="width:100px;">${element.selectedService.Quantity}</td>
    </tr>
    `).join('')}
    <!-- 这里可以继续添加表格的其他内容 -->
  </tbody>
</table>
`;

关键说明： #

• map会遍历serviceObj数组，为每个元素生成对应的<tr>字符串，最终得到一个包含所有行的字符串数组。
• join('')把数组中的所有字符串无缝拼接在一起，避免数组默认的逗号分隔符出现在HTML里。
• 整个map(...).join('')被包裹在模板字面量的${}中，会被正确解析为对应的HTML片段，而不是undefined。

如果你的serviceObj可能为空数组，也可以在map前加个可选链判断，比如req.body.serviceObj?.map(...) || ''，这样空数组时会返回空字符串，避免出现意外的内容。

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