如何移除JavaScript中insertAdjacentHTML生成的多余逗号

问题出在你直接把map返回的数组传给了insertAdjacentHTML()——map遍历后得到的是由HTML字符串组成的数组，当数组被转换为字符串时，元素之间会自动插入逗号作为分隔符，这就是你看到的多余逗号的来源。

解决方法很简单，把数组拼接成无分隔符的完整字符串即可，有两种常用方式：

方式一：map后调用join('') #

在map方法后面加上.join('')，将数组元素直接拼接成一个整体字符串：

const projectHTML = projectDataArray.map((el) => {
    return `<div class="row">${el.title}</div>`
}).join(''); // 关键：用join('')消除数组元素间的逗号
document.querySelector(".work_wrapper").insertAdjacentHTML("afterbegin", projectHTML);

方式二：用reduce直接拼接字符串 #

跳过数组生成，直接用reduce累加HTML字符串：

const projectHTML = projectDataArray.reduce((totalHtml, el) => {
    return totalHtml + `<div class="row">${el.title}</div>`;
}, ''); // 初始值为空字符串
document.querySelector(".work_wrapper").insertAdjacentHTML("afterbegin", projectHTML);

两种方法都能彻底移除多余逗号，其中map+join的写法更直观易读，推荐优先使用。

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