本文讲解如何在不使用模板引擎的前提下，通过 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(`                 
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 的关键基础。