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 = 'Juan';
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // "Hello, my name is Juan 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."
Advantages
- Greater readability: the syntax
${}
allows the code to be easier to read and understand. - Less prone to errors: with traditional string concatenation methods, it’s easy to make mistakes by forgetting quotes or
+
signs. - Greater flexibility: we can use expressions directly within
${}
. - No more space hell!: really, it was horrible looking at the
😆
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?"