Node.js使用Nodemailer发送HTML模板时无法嵌套反引号的问题

问题原因 #

该问题对应的undefined和语法异常有两个核心诱因：

1. 外层是Node.js的模板字符串反引号，解析时会把HTML内部JS的反引号识别为外层模板的结束标记，直接触发语法错误。
2. 内嵌<script>里的${item.name}会被Node.js的模板字符串优先解析，Node运行环境中不存在item变量，自然输出undefined，不会留给前端JS执行。

额外注意：几乎所有主流邮件客户端都会默认禁用HTML邮件内的所有JavaScript代码，你写的这段DOM插入逻辑即使语法修复完成，发到用户邮箱后也不会执行，完全无法实现预期效果。

最优解决方案（推荐） #

直接在Node.js层完成数据渲染，生成静态HTML字符串后传给Nodemailer，不需要在邮件中嵌入任何JS，兼容性最好：

// 先在Node层处理数据，拼接生成需要的HTML片段
const data = [
  {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
  {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
];
const goodsHtml = data.map(item => `<p>${item.name}</p>`).join('');

// 组装完整邮件HTML
let mailDetails={
  from: 'def@gmail.com',
  to: 'abc@gmail.com',
  subject: 'Order Confirmation Mail',
  html: `
  <html>
  <body>
    ${goodsHtml}
  </body>
  </html>
  `
};

仅修复反引号嵌套语法的方案（不推荐用于邮件场景） #

如果是其他非邮件场景需要保留内层反引号，只要在内层反引号和${前加反斜杠\转义，让Node.js外层模板将其识别为普通字符即可：

let mailDetails={
    from: 'def@gmail.com',
    to: 'abc@gmail.com',
    subject: 'Order Confirmation Mail',
    html: `<html>
<body>
<p id="s"></p>
<script>
const dataElement = document.querySelector('#s');
const data = [
  {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
  {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
];
data.map(item => {
  dataElement.insertAdjacentHTML('beforebegin', \`<p>\${item.name}</p>\`)});
</script>
</body>
</html>
`,
};

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