JavaScript Template Literals (Template Strings)

JavaScript template literals are strings that allow us to embed variables or expressions directly within them. They are enclosed in backticks ``.

Here is a simple example of template literals. Read the rest of the tutorial to learn more.

Example

let name = "Alice";
let greeting = `Hello ${name}`;
console.log(greeting); // Output: Hello Alice

Here, `Hello ${name}` is a template literal and we have embedded the name variable directly within it.


Example: JavaScript Template Literals

We can use template literals to embed JavaScript expressions or variables with the help of the ${...} syntax. For example,

let number1 = 8;
let number2 = 3;

// embed expression within template literal let result = `The sum of ${number1} and ${number2} is ${number1 + number2}.`;
console.log(result); // Output: The sum of 8 and 3 is 11.

In the above example, the following code is the template literal:

`The sum of ${number1} and ${number2} is ${number1 + number2}.`

In this template literal,

  • ${number1 + number2} is the embedded expression.
  • ${number1} and ${number2} are the embedded variables.

Notes:

  • Before template literals were introduced in JavaScript ES6, we would use the + operator to concatenate variables and expressions in a string.
  • Some browsers may not support the use of template literals. To learn more, visit JavaScript Template Literal support.

Template literals allow any type of quotes to be included directly.

Before JavaScript introduced template literals, single quotes (' ') or double quotes (" ") were used for strings.

And, you had to be careful when including quotes inside strings to avoid errors. For example, you could either

  • Mix single and double quotes.
  • Use escape characters.
// valid codes
// mix quotes to avoid errors
let string1 = 'A "quote" inside a string';  
let string2 = "Another 'quote' inside a string";


// invalid codes
// cannot use same quotes 
string1 = 'A 'quote' inside a string';  
string2 = "Another "quote" inside a string";  


// valid code after using escape characters
string1 = 'A \"quote\" inside a string'; 
string2 = "Another \'quote\' inside a string"; 

With template literals, you can easily include both single and double quotes in strings without needing escape characters:

let string1 = `This is a string with a 'single quote' in it.`; 
let string2 = `This is a string with a "double quote" in it.`;  

console.log(string1);
console.log(string2);

Output

This is a string with a 'single quote' in it.
This is a string with a "double quote" in it.
Create multiline strings using template literals.

Template literals also make it easy to write multiline strings. For example,

// multiline strings using template literals
let address = `123 Main St.
San Francisco, CA
94105`;

console.log(address);

Output

123 Main St.
San Francisco, CA
94105

Tagged Templates

Tagged templates are an advanced form of template literals in JavaScript. They allow you to parse template literals with a function.

Furthermore, you don't need to use parentheses () when passing the template literal to the function. For example,

function displayMessage(message) {
    return message;
}

// create a tagged template let result = displayMessage`Hello Jack`;
console.log(result); // [ 'Hello Jack' ]

Here, unlike regular function arguments, the template literal is split into an array.

In our example, the function received an array with a single element (the string from the template literal). So, we obtained [ 'Hello Jack' ] as an output.

Tip: Try passing normal strings as arguments to the displayMessage() function and notice the difference in syntax and output.

Did you find this article helpful?

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges