Template Literals in ECMAScript

Demo 1

Create new Javascript file named demo1.js. This file contains code demo as below:

/* Example 1 */
const line1 = 'Hello World ';
console.log(`content of line 1 is: ${line1}`);

/* Example 2 */
let content = `line 1
line 2
line 3`;
console.log(content);

/* Example 3 */
var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`
console.log(message);

Run Demo 1

Use node demo1.js statement run code demo

content of line 1 is: Hello World
line 1
line 2
line 3
Hello Foo,
want to buy 7 Bar for
a total of 294 bucks?

Demo 2

Create new Javascript file named demo2.js. This file contains code demo as below:

let id = 'p01';
const name = 'Name 1';
var price = 24.5;
var productInfo = `<table>
    <tr>
        <th>Id</th>
        <th>${id}</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>${name}</th>
    </tr>
    <tr>
        <th>Price</th>
        <th>${price}</th>
    </tr>
</table>`
console.log(productInfo);

Run Demo 2

Use node demo2.js statement run code demo

<table>
    <tr>
        <th>Id</th>
        <th>p01</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Name 1</th>
    </tr>
    <tr>
        <th>Price</th>
        <th>24.5</th>
    </tr>
</table>

Demo 3

Create new Javascript file named demo3.js. This file contains code demo as below:

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']
}
var 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('\n      ')}
      </ul>
    </footer>
  </article>`

console.log(html);

Run Demo 3

Use node demo3.js statement run code demo

<article>
    <header>
      <h1>Hello Template Literals</h1>
    </header>
    <section>
      <div>String interpolation is awesome. Here are some features</div>
      <div>Lots and lots of sanitized HTML</div>
    </section>
    <footer>
      <ul>
        <li>es6</li>
        <li>template-literals</li>
        <li>es6-in-depth</li>
      </ul>
    </footer>
  </article>