Template Literals in JavaScript
JavaScript template literals (also referred as String Templates) are a feature introduced in ECMAScript 6 that allows for more flexible and readable string formatting.
Let's take a look at how they work and how they can be used in our code.
Back-Tics Syntax
Back-tick syntax "`some-expression`" is a syntax element in JavaScript that is used to define Template Literals.
Template Literals are a way of creating strings that can contain placeholders for expressions, which are evaluated and interpolated into the final string.
Example:
In this example:
- The
${name} and ${age} placeholders are replaced with the values of the name and age variables, respectively.
Quotes Inside Strings
Template literals are enclosed by backticks (`), which allows you to use both single quotes and double quotes inside the string without needing to escape them.
This can be useful when you need to include a string within a string, or when you want to use quotes as part of your string's content.
As an example:
In this example:
- HTML code has a
p element with id output for displaying output. - JavaScript code creates a constant 'name' with value
CSC. - Template literals used to display a message in
p element with name variable and single/double quotes. document.getElementById("output").innerHTML sets HTML content of p element to JavaScript output.
Multiline Strings
You can create multiline strings using template literals.
To create a multiline string, you simply need to enclose the string content within backticks (``) and include line breaks as necessary.
As an example:
const multilineString = `
This is a multiline string.
It can span multiple lines
without needing to concatenate.
You can include variable expressions like this: ${1 + 2}.
And you can use escape characters like this: \\ or \n.
`;
console.log(multilineString);
In this example:
- The backticks indicate that the string content is a multiline string.
- The string contains line breaks and includes variable expressions and escape characters.
When you run this code, you will see the following output:
This is a multiline string.
It can span multiple lines
without needing to concatenate.
You can include variable expressions like this: 3.
And you can use escape characters like this: \ or
Interpolation
Interpolation, also known as string interpolation or variable interpolation, is the process of inserting a value or expression into a string.
In JavaScript, interpolation is commonly done using template literals, which allow you to embed expressions and variables directly into a string.
To interpolate a value or expression in a template literal, you simply need to enclose it within ${}.
As an example:
Expression interpolation
Expression interpolation is a feature of template literals in JavaScript that allows you to substitute the value of an expression within a string.
To perform expression interpolation, you enclose the expression within ${} within the template literal.
As an example:
const price = 9.99;
const taxRate = 0.1;
const totalPrice = price * (1 + taxRate);
const message = `The price of the item is $${price.toFixed(2)}, the tax is $${(
price * taxRate
).toFixed(2)}, and the total price is $${totalPrice.toFixed(2)}.`;
console.log(message);
In this example:
- We are using template literals to create a string that contains interpolated expressions.
- The
price, taxRate, and totalPrice variables are used in the expressions. - The
toFixed() method is used to format the output of the interpolated expressions to two decimal places.
The result will be:
The price of the item is $9.99, the tax is $1.00, and the total price is $10.99.
HTML Templates
HTML template literals, also known as HTML templates or HTML template literals, are a feature in JavaScript that allows you to define HTML templates within a string using backticks (``) instead of double or single quotes.
HTML template literals work in a similar way to regular template literals, but with the added benefit of being able to include HTML markup within the string.
To create an HTML template literal, simply wrap your HTML markup in backticks, like this:
const html = `
<div class="container">
<h1>My Page</h1>
<p>Welcome to my page! Here's some content:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>The current time is: ${new Date()}</p>
</div>
`;
In this example:
- We have a template literal that defines a HTML markup with an
h1 heading, some introductory text, and a list of items. - We also use the
${} syntax to embed the current date and time within a p element.
HTML template literals provide a convenient way to generate HTML content dynamically using JavaScript. They can also be used in conjunction with other JavaScript features, such as loops and conditionals, to generate more complex HTML markup.