将 join() 添加到 map() 函数

Question

我正在映射一个数组以使用模板文字在浏览器中显示数据。

对于每个渲染的对象，浏览器中都会显示一个逗号，并且当我检查元素时也会显示一个逗号。我做了一些阅读，我认为这是因为我没有加入数组，我正在尝试这样做，但我不明白在我拥有的基本功能中添加它的位置。

这是代码：

let synopsisRender = synopsisContent.map((item)=>{

    return`

    <div class="synopsis" key=${item.id}>

        <div class="synopsisHeader">

            <div class="cover">

                <img src="${item.poster}" alt="${item.altText}">

            </div>

            <div class="synopsisTitle">

                <h1>${item.title}</h1>

            </div>

        </div>

        <div class="synopsisText">

            <h2>${item.subTitle}</h2>

            <p>${item.synopsisText}</p>

        </div>

    </div>

    `

});

document.getElementById("synopsis").innerHTML = synopsisRender;

Answer 1

在mapping 之后，但在分配给innerHTML.let synopsisRender = synopsisContent.map((item)=>{&nbsp; &nbsp; return`&nbsp; &nbsp; <div class="synopsis" key=${item.id}>&nbsp; &nbsp; &nbsp; &nbsp; <div class="synopsisHeader">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="cover">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="${item.poster}" alt="${item.altText}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="synopsisTitle">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>${item.title}</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="synopsisText">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>${item.subTitle}</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>${item.synopsisText}</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; `}).join(''); //Here...document.getElementById("synopsis").innerHTML = synopsisRender; //...Or here, `synopsisRender.join('')`