JavaScript map函数生成额外逗号：是否为预期结果？如何解决？

你看到的额外逗号是JavaScript数组转字符串的默认行为，属于预期结果。

为什么会出现逗号？ #

map()方法执行后返回的是一个数组，当你直接把这个数组和<ul>这类字符串拼接时，JavaScript会自动调用数组的toString()方法。而数组的toString()默认会用逗号作为分隔符，把数组里的每个元素连接成字符串，所以最终生成的HTML里就会多出这些逗号。

怎么解决？ #

必须用join('')方法把数组转换成无分隔符的字符串，这样拼接后就不会有逗号了。修改后的JavaScript代码如下：

function showMovies(){
  const movies = [
    {title: 'a nice movie', year: 2020, rating: 4.5},
    {title: 'another nice movie', year: 2021, rating: 4.8},
    {title: 'just another movie', year: 2022, rating: 4.2}
  ];
  
  let html ="";
  html = movies.map(function(m) {
    return "<li>" + m.title + '-' + m.year + "-"  + m.rating + "</li>";
  }).join(''); // 添加join('')去除分隔符

  html = "<ul>" + html + "</ul>";
  
  document.getElementById('list').innerHTML = html;
}

补充提示 #

处理数组转字符串用于HTML拼接时，join('')是标准解决方案，能避免这类格式问题。

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