Javascript 模板文字 - function 調用

Question

我想知道是否可以在 javascript 模板文字中調用 function。 對於那些不知道https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals我有這樣的東西：

`<div class="product-card-labels">
    ${statuses.forEach(function(status) { return `<span class="product-card-label">${status.name}</span>` })}
</div>`

如您所見，我想調用 array.forEach() ，它應該將字符串返回給模板。

Answer 1

您的模板語法正確，但在 function 調用中沒有返回任何內容。 如果您使用.map和.join output（而不是返回undefined的.forEach ），它會正常工作。

`<div class="product-card-labels">
    ${statuses.map(function(status) { return `<span class="product-card-label">${status.name}</span>`; }).join('')}
</div>`