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