Synonyms:
- Template Literals
- Template Strings
- String Templates
- Back-Tics Syntax
Back-Tics Syntax
Template Literals use back-ticks (“) rather than the quotes (“”) to define 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>
Result:
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, you can use both single and double quotes inside a string:
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>
Result:
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 allows 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>
Result:
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 provide an easy way to interpolate variables and expressions into strings.
The method is called string interpolation.
The syntax is:${…}
Variable Substitutions
Template literals allow variables 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 firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Result:
JavaScript Template Literals
Template literals allows variables in strings:
Welcome John, Doe!
Template literals are not supported in Internet Explorer.
Automatic replacing of variables with real values is called string interpolation.
Expression Substitution
Template literals allow 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>
Result:
JavaScript Template Literals
Template literals allows variables in strings:
Total: 12.50
Template literals are not supported in Internet Explorer.
Automatic replacing of expressions with real values is called string interpolation.
HTML Templates
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 header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
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>
Result:
JavaScript Template Literals
Template literals allows variables in strings:
Templates Literals
- template literals
- javascript
- es6
Template literals are not supported in Internet Explorer.
Browser Support
Template Literals is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Template Literals is not supported in Internet Explorer.