Simple ES6 Template

template.js

var article = {
  title: 'Hello Template Literals',
  teaser: 'String interpolation is awesome. Here are some features',
  body: 'Lots and lots of sanitized HTML',
  tags: ['es6', 'template-literals', 'es6-in-depth']
}

function html(template, ...expressions) {
  return template.reduce((accumulator, part, i) => {
    return accumulator + expressions[i - 1] + part
  })
}

const result = html`
    <article>
        <header>
            <h1>${article.title}</h1>
        </header>
        <section>
            <div>${article.teaser}</div>
            <div>${article.body}</div>
        </section>
        <footer>
            <ul>
                ${article.tags.map(tag => `<li>${tag}</li>`).join('')}
            </ul>
        </footer>
    </article>
`;

console.log(result);

template_literals_sources.js

// http://exploringjs.com/es6/ch_template-literals.html
// http://2ality.com/2015/01/template-strings-html.html
// https://ponyfoo.com/articles/es6-template-strings-in-depth
// https://mxstbr.blog/2016/11/styled-components-magic-explained/
// https://www.keithcirkel.co.uk/es6-template-literals/