Node.js HTTP服务展示数组元素失效问题的解决（无模板引擎）

问题根源 #

你这段代码失效的核心原因有两个：

• forEach无返回值：forEach方法执行后只会返回undefined，模板字符串里插入的其实是这个undefined，自然看不到数组元素。
• 回调逻辑无效：你在forEach回调里写的{el}只是一个无意义的对象字面量，根本没有把元素内容传递到模板里的逻辑。

无模板引擎的解决方案 #

把forEach换成map方法——map会遍历数组并返回一个包含处理后元素的新数组，最后用join('')（或指定分隔符）把数组拼接成字符串，就能直接插入到模板字符串中。

修正后的核心代码片段 #

<span>
  ${[1, 2, 3].map(el => el).join(' ')}
</span>

如果需要给元素加格式（比如逗号分隔），可以改成：

<span>
  ${[1, 2, 3].map(el => `${el}`).join(', ')}
</span>

完整修正代码 #

const http = require('http');

const port=3000;

http.createServer((req, res)=>{

    const {url , method , headers} = req;

    res.write(`<html>
                 <head>
                    <title>My test</title>
                 </head>
                 <body>
                     <h1>This is my h1</h1>
                     <p>
                        This is my first paragraph. The request method and url are: ${method} , ${url}
                     </p>
                     <p>
                        The items: 
                           <span>
                           ${[1, 2, 3].map(el => el).join(' ')}
                           </span>
                     </p>
                 </body>
               </html>`);
    res.end();
}).listen(3000);

扩展用法 #

如果需要给每个数组元素套HTML标签（比如自定义样式的元素），同样适用这个逻辑：

<span>
  ${[1, 2, 3].map(el => `<span class="item-style">${el}</span>`).join('')}
</span>

内容的提问来源于stack exchange，提问作者Javad-M