Features :
Prevent script injection, with $${myVariable}
direct usage of [...].map() instead of [...].map().join('')
const title = 'The cool folks list'
const folks = [
{name: 'John'},
{name: 'David'},
{name: '<b>Goliath</b>'}
]
const output = html`
<h1>${title}</h1>
<ul>
${folks.map((folk) => html`
<li>$${folk.name}</li>
`)}
</ul>
`
console.log(output)
Result :
<h1>The cool folks list</h1>
<ul>
<li>John</li>
<li>David</li>
<li><b>Goliath</b></li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals