ES6 templating

Note date 27 Feb, 2020
Tags javascript
👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page 
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 

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>
`
← Back home