es6-templatestrings-101.md

ES6 Template Strings 101

Using inline Javascript:

const dog = {
    name: 'Snickers', 
    age: 2 
};

const markup = `<p>${dog.name} is ${dog.age * 7}</p>`;

console.log(markup);
//  <p>Snickers is 14</p>

Nesting template strings:

const dogs = [
    { name: 'Snickers', age: 2 },
    { name: 'Hugo', age: 8 },
    { name: 'Sunny', age: 1 }
];

const markup = `<ul>${dogs.map(dog => `<li>${dog.name} is ${dog.age * 7}</li>`).join('')}</ul>`;

console.log(markup);
//  <ul><li>Snickers is 14</li><li>Hugo is 56</li><li>Sunny is 7</li></ul>

Intending to create prettier output strings:

// note the use of join value to keep indention accross nested items
const prettyMarkup = `
<ul>
    ${dogs.map(dog => 
        `<li>${dog.name} is ${dog.age * 7}</li>`).join(`
    `)}
</ul>
`;

console.log(prettyMarkup);
//  <ul>
//      <li>Snickers is 14</li>
//      <li>Hugo is 56</li>
//      <li>Sunny is 7</li>
//  </ul>

Using ternary operator for conditional statements:

const prettyMarkupWithCondition = `
<ul>
    ${dogs.map(dog => 
        `<li>${dog.name} is ${dog.age > 6 ? '<em>>old</em>' : `${dog.age * 7}`}</li>`).join(`
    `)}
</ul>
`;

console.log(prettyMarkupWithCondition);
//  <ul>
//      <li>Snickers is 14</li>
//      <li>Hugo is <em>old</en></li>
//      <li>Sunny is 7</li>
//  </ul>

---