本文讲解如何在不使用模板引擎的前提下，通过 javascript 模板字符串正确将数组元素插入 html 响应中，重点解决 `foreach` 无法返回值导致渲染失败的问题，并提供简洁可靠的替代方案。
在 Node.js 原生 http 模块中构建简单服务时，常需直接拼接 HTML 字符串返回响应。但若试图用 Array.prototype.forEach() 在模板字符串中遍历数组并内联渲染（如 ${arr.forEach(...)})，页面将不显示任何内容——这是因为 forEach() 的设计目的仅为“执行副作用”，其返回值恒为 undefined，而模板字符串中的 ${...} 仅会插入表达式的求值结果。
例如，原代码中这一段：
${[1, 2, 3].forEach((el) => { el; })}不仅 forEach 返回 undefined，内部箭头函数 (el) => { el; } 也因使用了大括号语句块却未显式 return，实际返回 undefined。最终 内为空。
✅ 正确做法是使用能返回新字符串的数组方法，最常用且简洁的是 Array.prototype.join()：
立即学习“前端免费学习笔记（深入）”；
const http = require('http');
const port = 3000;
http.createServer((req, res) => {
const { url, method } = req;
// ✅ 使用 join() 将数组转为逗号分隔的字符串（可自定义分隔符）
const itemsHtml = [1, 2, 3].join(', ');
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
res.write(`
My Test
This is my h1
This is my first paragraph. The request method and url are: ${method}, ${url}
The items: ${itemsHtml}
`);
res.end();
}).listen(port, () => {
console.log(`Server running at http://localhost:${port}/`);
});
? 其他实用方案（按场景推荐）：
- 若需为每个元素包裹 HTML 标签（如
- ），用 map() + join() 组合：
${[1, 2, 3].map(el => `${el}`).join(' | ')} // 输出：1 | 2 | 3 - 若数组含特殊字符（如
- 对于复杂结构，建议封装为纯函数（如 arrayToHtmlList(arr)），提升可读性与复用性。
⚠️ 注意事项：
- 避免在模板字符串中执行复杂逻辑，保持可读性；
- 始终设置 Content-Type 响应头为 text/html; charset=utf-8，防止中文乱码；
- 生产环境请使用 Express + EJS/Pug 等模板引擎或现代框架（如 Next.js），原生拼接仅适用于学习或极简原型。
掌握 join()、map() 等函数的返回特性，是安全、高效生成动态 HTML 的关键基础。
