JS渲染DOM列表出现多余逗号、引号异常问题求助

多余逗号来自数组隐式类型转换的默认行为：
你在模板字符串中直接嵌入了currentCollection[i].Words.map(...)的返回值，而map()执行后返回的是数组类型。当数组被直接拼接到字符串中时，JS会自动调用数组的toString()方法做转换，该方法默认用英文逗号,作为分隔符拼接所有数组元素，最终渲染到页面上就会出现列表项之间多余的逗号。
你看到的多余引号，是数组中null值参与字符串拼接时的类型转换异常连带导致的，修复逗号问题后会一并消失。

在map()调用的末尾链式调用.join('')，手动指定空字符串作为数组元素的拼接符，替换掉默认的逗号分隔符即可。
更规范的写法是先通过filter()提前筛掉不符合正则匹配的单词，避免数组中残留null值，逻辑更清晰，性能也更好。

修复后的完整代码：

const regex = /[a-z]/g;
for (let i = 0; i < currentCollection.length; i++) {
  elementsString += `<div><h2>${currentCollection[i].name}</h2>
  <ul>
    ${currentCollection[i].Words
      .filter(word => regex.test(word))
      .map(word => `<li>${word}</li>`)
      .join('')
    }
  </ul></div>`
}

注：你原代码中定义的let words = currentCollection[i].Words.join(" ")没有被使用，可以直接删掉避免冗余。
如果你想保留原来三元表达式返回null的写法，只需要在map后加.join('')也能正常运行，效果和先filter的写法一致。

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