通过对象数组进行映射会在标记中返回不必要的逗号字符

Question

输出中逗号的屏幕截图

你好，我正在建设金店网站，我有一系列的对象。我正在映射一组对象，以便在主页面上显示产品。但是，在显示的输出中有一个额外的逗号字符，我不需要它。有人能帮我解决这个问题吗？你可以看到图像

const products = [
{
id: 1,
title: 'ძველი ქარხნული საათი',
prob: 583,
weight: 19.74,
price: 2100,
img1: 'img/watchWm1.jpg',
img2: 'img/watchWm.jpg',
category: 'watch',
gender: 'woman'
},
{
id: 2,
title: 'ძველი ქარხნული საათის ბრასლეტი',
prob: 583,
weight: 13.5,
price: 2000,
img1: 'img/watchBracletWm.jpg',
img2: '',
category: 'bracelet',
gender: 'woman'
},
{
id: 3,
title: 'ძველი ქარხნული საათის ბრასლეტი',
prob: 583,
weight: 22.15,
price: 3300,
img1: 'img/watchBracletWm2.jpg',
img2: '',
category: 'bracelet',
gender: 'woman'
},
{
id: 4,
title: 'გრაციელას ბრენდის ბრასლეტი',
prob: 750,
weight: 27.3,
price: 5400,
img1: 'img/4.jpg',
img2: '',
category: 'bracelet',
gender: 'woman'
},
{
id: 5,
title: 'იტალიური ქარხნული ბრასლეტი(კაცის)',
prob: 585,
weight: 42.91,
price: 6000,
img1: 'img/5.jpg',
img2: '',
category: 'bracelet',
gender: 'man'
}
];
//Display All Products on Main Page
var productsOuterDiv = document.getElementById('productsOuterDiv');
const productsBox = products.map(product => `<div class='productDiv'>
<div class='imgDiv'>
<img src='${product.img1}' alt='${product.title}'>
</div>
<h6><strong>${product.title}</strong></h6>
<p><strong>წონა:</strong> ${product.weight} გრამი</p>
<p><strong>სინჯი(პრობი):</strong> ${product.prob}</p>
<p><strong>ფასი:</strong> ${product.price} ლარი</p>
<button class='btn btn-details'>დეტალურად</button>
</div>`);
productsOuterDiv.innerHTML = productsBox;

Answer 1

您有一个数组，当您productsOuterDiv.innerHTML = productsBox;时，它运行toString，用逗号分隔它们。使用加入

productsOuterDiv.innerHTML = productsBox.join('');

var arr = [`<span>1</span>`,`<span>2</span>`,`<span>3</span>`];
document.getElementById("out1").innerHTML = arr;
document.getElementById("out2").innerHTML = arr.join("");

span{ border: 1px dashed #CCC; }

<div id="out1"></div>
<hr>
<div id="out2"></div>