Node.js JSON转对象后渲染data-category属性去除逗号分隔符咨询

原因说明 #

你直接将数组类型的category/fabric字段嵌入模板字符串时，JavaScript 会自动调用数组的toString()方法，该方法默认使用逗号作为分隔符拼接数组成员，所以得到了带逗号的属性值。

实现方法 #

使用数组的join()方法，手动指定空格作为分隔符拼接数组成员即可，同时建议给data-category的属性值外层加上双引号，避免属性值包含特殊字符时出现解析错误。

代码修改示例 #

如果你只需要把category字段的值作为data-category属性值，直接修改属性赋值部分即可：

const layout = require('../layout');
module.exports = ({ products }) => {
  const renderedProducts = products.map(product => {
    return `<div class="image shopProduct" data-category="${product.category.join(' ')}"><img src="data:image/png;base64, ${product.image}"/><h3 class="subtitle">${product.title} ${product.model}</h3><h5>${product.price} zł</h5><form action="/cart/products" method="POST"><input hidden value="${product.id}" name="productId" /><button class="button has-icon is-inverted">Dodaj do<i class="fa fa-shopping-cart"></i></button></form></div>`;
  }).join('\n');
  // 原有后续逻辑保持不变即可
}

如果你需要同时把category和fabric两个字段的所有值都放到data-category里，修改为下面的写法即可：

const categoryVal = [...product.category, ...product.fabric].join(' ')
// 把属性赋值部分替换为 data-category="${categoryVal}"

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