JavaScript Template Literals
Synonyms:
- Template Literals
- Template Strings
- String Templates
- Back-Tics Syntax
Back-Tics Syntax
Template literals use back-ticks (``) instead of double quotes (") to create a string.
Quotes Inside Strings
You can include both single and double quotes in a string using template literals.
Multiline Strings
Template literals allows multiline strings:
Interpolation
Template literals make it simple to insert variables and expressions into strings.
The method is called string interpolation.
The syntax is:
Variable Substitutions
Template literals make it possible to use variables within strings.
String interpolation refers to the automatic replacement of variables with their actual values.
Expression Substitution
Sure, here's a simpler and more precise version of the given text while retaining the HTML tags and class:
Template literals enable the use of expressions within strings.
HTML Templates
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>Templates use back-ticks (``) to define a string:</p>
<p id="demo"></p>
<p>Templates are not supported in Internet Explorer.</p>
<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>Using back-ticks, you can include either single or double quotes within a string.</p>
<p id="demo"></p>
<p>Templates not supported in Internet Explorer.</p>
<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>Templates allow multiline strings:</p>
<p id="demo"></p>
<p>Templates 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>Templates allow variables in strings:</p>
<p id="demo"></p>
<p>Templates 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>Templates allow variables in strings:</p>
<p id="demo"></p>
<p>Templates 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Template Strings</h1>
<p>Templates allow variables in strings:</p>
<p id="demo"></p>
<p>Templates are not supported in Internet Explorer.</p>
<script>
let header = "Template Strings";
let tags = ["template strings", "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>
HTML
CSS
Javascript
Jquery