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

Template Literals in JavaScript

Template Literals are a special syntax for defining text strings in JavaScript, which provide 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 offer several very useful functions such as,

  • Variable and expression interpolation
  • Support for multi-line and formatted text

Template Literals are a very powerful syntax. Get used to using it because it simplifies working with texts a lot.

Expression Interpolation

One of the most powerful features of Template Literals is the ability to interpolate variables and expressions directly within the text 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 it with long expressions. For readability, if it’s not short, extract it as an independent variable.

String Concatenation

One of the most frequent uses of Template Literals is simply using them to concatenate texts (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 texts.

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 looks 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."

Multi-line Strings

Template Literals allow you to define text strings that span multiple lines, without the need for special escape characters.

const multiLineMessage = `
  <div>
    <h1>Header</h1>
    <p>This is a paragraph in a multi-line string.</p>
  </div>
`;

This is especially useful for creating long or structured texts (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 for translating and formatting 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