/

ES6 templating

javascript
Table of contents
  • or
js
const dogs = [
{ name: 'Snickers', age: 2 },
{ name: 'Hugo', age: 8 },
{ name: 'Sunny', age: 1 },
]
const markup = `
<ul class="dogs">
${dogs
.map(
dog =>
`<li>${dog.name}
is
${dog.age * 7}
</li>`
)
.join('')}
</ul>
`

or

js
const song = {
name: 'Dying to live',
artist: 'Tupac',
featuring: 'Biggie Smalls',
}
const markup = `
<div class="song">
<p>
${song.name} - ${song.artist}
${song.featuring ? `(Featuring ${song.featuring})` : ''}
</p>
</div>
`
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.