如何在模板字符串中呈现具有非零值的属性

Question

我实际上是在尝试使用模板字符串呈现 HTMLElement。功能是这样的

function renderContent(){
  return `<div class="card">
              <span>Content goes here</span>
              <ul class="list">
                 ${renderList()}
              </ul>
          </div>`
}

renderList()函数是这样的

function renderList() {
  const valueWithCount = { a : 1, b: 0, c:0, d:1}
  return Object.entries(valueWithCount).map(([key, value]) => {
    return `<li>
                    <span class="key">${key}:</span>
                    <span class="value">${value}</span>
            </li>`;
  });
}

我希望内容呈现为

Content goes here
a:1
d:1

我不想渲染值为 0.I 的属性，可以写 value && (some HTML content)。但是因为它在模板字符串中，所以即使是 0 也会被打印出来。如果我使用三元 value ? some content : null ，行为是 same.The 与 undefined 相同的情况。

如何避免这种情况？

Answer 1

使用.filter()代替.map():

function renderList() {
  const valueWithCount = { a : 1, b: 0, c:0, d:1}
  return Object.entries(valueWithCount).filter(([key, value]) => {
    if(value !== 0)
    return `<li>
                    <span class="key">${key}:</span>
                    <span class="value">${value}</span>
            </li>`;
   return null;
  });
}

return null其他情况

如何在模板字符串中呈现具有非零值的属性

How to render propeties with nonzero values inside template strings

html

javascript

ecmascript-6

ecmascript-2016