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>