Skip to main content

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:

Editor

Loading...

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:

Editor

Loading...

In this example:

  • HTML code has a p element with id output for displaying output.
  • JavaScript code creates a constant 'name' with value Skillupwards.
  • 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:

Editor

Loading...

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.
info

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.