如何移除innerHTML中的逗号？JS数组渲染元素逗号问题

你遇到的逗号问题，根源是模板字符串中插入数组时，JavaScript会自动调用数组的toString()方法，这个方法默认会用逗号分隔数组元素，和你单独给每个元素转toString()无关。

解决方法很简单，只需要在map()方法后面调用join('')，把数组转换成无分隔符的字符串即可：

<script>
        const x = ["Karthik", "Mouna", 3, 4, 5];
        const text = document.getElementById('my-text');
        text.innerHTML = `<ul>
                ${x.map(ele => `<li>${ele}</li>`).join('')}
       </ul>`
    </script>

原理说明 #

map()会返回一个包含所有<li>字符串的数组，比如["<li>Karthik</li>", "<li>Mouna</li>", ...]。直接插入模板字符串时，数组会被转为"<li>Karthik</li>,<li>Mouna</li>,..."，逗号就是这么来的。而join('')会把数组元素直接拼接成一个完整的字符串，不会添加任何分隔符，最终插入的就是干净的列表代码。

内容的提问来源于stack exchange，提问作者Karthik M C