无法在Node邮件HTML模板中以列表展示JS传递的课程数组

问题核心原因 #

绝大多数邮件客户端（如Gmail、Outlook）会默认禁用JavaScript，你试图在HTML模板里通过脚本解析字符串化数组的方案从根本上不具备兼容性，这是导致列表无法正常显示的关键。

正确解决方案：服务端预渲染HTML列表 #

不要传递字符串化的数组给模板，而是在Node服务端直接将课程数组转换成完整的HTML列表代码，再填充到模板的对应位置。

示例Node代码

// 模拟用户已购课程数组
const purchasedCourses = [
  { name: "JavaScript进阶实战", price: "¥99" },
  { name: "React组件化开发", price: "¥129" },
  { name: "Node.js后端入门", price: "¥89" }
];

// 服务端生成课程列表的HTML代码
const coursesListHtml = purchasedCourses.map(course => 
  `<li>${course.name} - 价格：${course.price}</li>`
).join('');

// 读取HTML模板并替换占位符
const emailTemplate = fs.readFileSync('./receipt-template.html', 'utf8');
const finalEmailContent = emailTemplate.replace('{{COURSES_LIST}}', coursesListHtml);

// 后续发送finalEmailContent作为邮件内容即可

对应HTML模板片段

<div class="course-section">
  <h3>您的已购课程</h3>
  <ul style="list-style-type: disc; margin-left: 20px;">
    {{COURSES_LIST}}
  </ul>
</div>

额外兼容性提示 #

• 邮件HTML尽量使用表格布局和内联样式，避免依赖外部CSS，保证在不同客户端的显示一致性。
• 测试时可使用本地邮件捕获工具（如Mailtrap）预览渲染效果，避免直接发送给用户。

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