不在代码中时检查时出现在 html 页面上的随机逗号

Posted 2023-02-14

【中文标题】不在代码中时检查时出现在 html 页面上的随机逗号

【英文标题】：Random commas appearing on html page on inspect when not in code

【发布时间】：2022-01-16 22:51:39

【问题描述】：

我有一个简单的 html 页面，我正在映射一个数组以用卡片填充一个 div。卡片对齐完全错误，所以当我检查它时，我看到除了最后一张之外，每张卡片后面都有逗号，这破坏了对齐。我没有在代码中添加这些逗号。我的代码：

    itemsdiv.innerHTML = items.map(el => 
        return (`
        <div class="item">
            <span class="item-title">$el.name</span>
            <img class="item-image" src=$el.src>
            <div class="item-details">
                <span class="item-color">$el.color</span>
            </div>
        </div>
        ` )
    )

itemsdiv 是一个要填充的空 div，而 items 是一个如下所示的数组：

    items = [
        
            name: 'T-Shirt',
            src: 'Images/Shirt.png',
            color: 'blue',
        ,
        
            name: 'Coffee Cup',
            src: 'Images/Coffee.jpg',
            color: 'red',
        
    ]

当我检查时，它看起来像这样：

<div class="itemsdiv">
   <div class="item"></div>
   ","
   <div class="item"></div>
   ","
   <div class="item"></div> 
</div>

【问题讨论】：

当您将数组转换为字符串时，它会自动将元素之间用逗号连接起来。将数组分配给innerHTML 会将其转换为字符串。

@VLAZ 谢谢你的解释，感谢你的解释和穆格的回答，我解决了

【参考方案1】：

在.map 之后尝试标记.join(" ")

基于@VLAZ 评论的解决方案：

当您将数组转换为字符串时，它会自动将元素之间用逗号连接起来。将数组分配给 innerHTML 会将其转换为字符串。

【讨论】：

这个答案可以通过解释他们为什么应该这样做来改进。

VLAZ 在他们对该问题的评论中解释了这一点。会更新

@Muge - 答案应该是完整的，而不是依赖于页面中分散的 cmets，读者可能不会注意。 *** 更像是一个宏大的 Wiki，而不像 Facebook/Reddit/Whatsapp 支持小组，因此您希望在这里尽可能地编写有用的信息。

感谢您的反馈。由于采用了 SO 格式，社区可以编辑发现信息不足的答案。