Language: EN
LuisLlamas Logo
Search
⏲️ ~ 3 minutes Beginner
javascript-template-literals

Template Literals in JavaScript

Template Literals are a special syntax for defining strings in JavaScript, which offers several powerful advantages over traditional ones.

They were introduced in ECMAScript 6 (2015) and are defined using backticks (`) (instead of single or double quotes).

const greeting = `Hello, world`;  // Template Literal

Template Literals provide several very useful features such as,

  • Variable and expression interpolation
  • Support for multiline and formatted text

Template Literals are a very powerful syntax. Get used to using them because they greatly simplify working with text.

Expression Interpolation

One of the most powerful features of Template Literals is the ability to interpolate variables and expressions directly within the string.

This is done using the syntax ${expression} within the template literal. The Template Literal will replace it with its evaluated value as a String.

const name = 'Luis';
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // "Hello, my name is Luis and I am 25 years old."

In addition to variables, Template Literals allow you to include any JavaScript expression within the string (mathematical operations, function calls, conditionals, etc).

const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."

const isAdult = (age) => age >= 18;
const message = `You are ${isAdult(21) ? 'an adult' : 'a minor'}.`;
console.log(message); // "You are an adult."

But don’t overdo putting lengthy expressions. For readability, if it’s not short, extract it as a separate variable.

String Concatenation

One of the most common uses of Template Literals is simply using them to concatenate text (in fact, everything they do could be done by concatenating text).

Before the introduction of Template Literals, we had to use string concatenation (for example with +) to include variables within text.

const name = 'Pedro';
const age = 28;
const message = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

console.log(message); // "Hello, my name is Pedro and I am 28 years old."

With Template Literals, it would look like this,

const name = 'Pedro';
const age = 28;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(message); // "Hello, my name is Pedro and I am 28 years old."

Multiline Strings

Template Literals allow you to define strings that span multiple lines without needing special escape characters.

const multilineMessage = `
  <div>
    <h1>Header</h1>
    <p>This is a paragraph in a multiline string.</p>
  </div>
`;

This is especially useful for creating long or structured text (like HTML or long messages).

Tagged Template Literals

An advanced feature of Template Literals is the use of tagged functions, also known as Tagged Templates.

A tagged function allows you to process the content of the template literal before the final string is created.

function tag(literals, ...values) {
  console.log(literals); // Array of literals
  console.log(values); // Array of interpolated values
  return 'Processed string';
}

const name = 'Ana';
const age = 30;
const message = tag`Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // "Processed string"

This is useful for tasks such as internationalization, data sanitization, and building complex strings.

function translator(literals, ...values) {
  // Logic to translate and format strings
  return literals[0] + values.join('') + literals[1];
}

const name = 'Carlos';
const message = translator`Hello ${name}, how are you?`;

console.log(message); // "Hello Carlos, how are you?"

On this page