String Templates

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

String Template

Back-Tics Syntax

Template Literals make use of the back-ticks (“) rather than the quotes (“”) to specify a string:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals use back-ticks (“) to define a string:</p>

<p id=”demo”></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>

let text = `Hello world!`;

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript Template Literals

Template literals use back-ticks (``) to define a string:

Hello World!

Template literals are not supported in Internet Explorer.

Quotes Inside Strings

With template literals, both single and double quotes within a string are used:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Template Literals</h2>

<p>With back-ticks, you can use both single and double quotes inside a string:</p>

<p id=”demo”></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>

let text = `He’s often called “Johnny”`;

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript Template Literals

With back-ticks, you can use both single and double quotes inside a string:

He's often called "Johnny"

Template literals are not supported in Internet Explorer.

Multiline Strings

Template literals enables multiline strings:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows multiline strings:</p>

<p id=”demo”></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>

let text =

`The quick

brown fox

jumps over

the lazy dog`;

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript Template Literals

Template literals allows multiline strings:

The quick brown fox jumps over the lazy dog

Template literals are not supported in Internet Explorer.

Interpolation

Template literals enables an easy way to interpolate variables and expressions into strings.

The method is known as string interpolation.

The syntax is: ${…}

Variable Substitutions

Template literals enables variables in strings:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id=”demo”></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>

let firstName = “John”;

let lastName = “Doe”;

let text = `Welcome ${firstName}, ${lastName}!`;

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript Template Literals

Template literals allows variables in strings:

Welcome John, Doe!

Template literals are not supported in Internet Explorer.

Expression Substitution

Template literals enable expressions in strings:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id=”demo”></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>

let price = 10;

let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

document.getElementById(“demo”).innerHTML = total;

</script>

</body>

</html>

Output

JavaScript Template Literals

Template literals allows variables in strings:

Total:12.50

Template literals are not supported in Internet Explorer.

HTML Templates

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id=”demo”></p>

<script>

let header = “Templates Literals”;

let tags = [“abc”, “xyz”, “123”];

let html = `<h2>${header}</h2><ul>`;

for (const x of tags) {

  html += `<li>${x}</li>`;

}

html += `</ul>`;

document.getElementById(“demo”).innerHTML = html;

</script>

</body>

</html>

Output

JavaScript Template Literals

Template literals allows variables in strings:

Template Literals

  • abc
  • xyz
  • 123