Template literals

What are JS Template literals?

JS Template literals, introduced in ES6, are a type of string that allows for easier string interpolation and multiline strings. They are enclosed by backticks (`` ` ``) instead of single or double quotes used for regular strings.

// Example of a template literal
const name = "John";
const age = 25;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // Output: My name is John and I am 25 years old.

Template literals provide a more concise way to concatenate strings and embed expressions within them. They make it easier to create dynamic strings with variables and evaluate expressions.

String interpolation

String interpolation is the process of including expressions within a string. With template literals, expressions can be embedded using `${}`. When the template literal is evaluated, the expressions are replaced with their corresponding values.

const name = "John";
const age = 25;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // Output: My name is John and I am 25 years old.

In the example above, `${name}` and `${age}` are expressions that are evaluated and inserted into the template literal.

Multiline strings

Template literals also allow for multiline strings, meaning that line breaks can be included within the string without the need for escape characters.

const multiline = `
This is a multiline string.
It can contain line breaks and formatting,
making it easier to write and read.
`;
console.log(multiline);

The output of the above example will preserve the line breaks and produce a multiline string.

Expressions Evaluation

Inside '${...}', you can have any valid JavaScript expression. It can be a variable, a function call, an arithmetic operation, or even a complex expression.

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

Escaping template literals

If you need to include a backtick within a template literal, you can escape it by using a backslash (\) before the backtick.

const message = `This is a backtick: \` inside a template literal`;
console.log(message); // Output: This is a backtick: ` inside a template literal

The backslash ensures that the backtick is interpreted as a literal character instead of being considered as the closing of the template literal.

Nested Template Literals

You can nest template literals within other template literals to achieve more complex string formatting.

const name = 'John';
const age = 30;
console.log(`My name is ${name} and I am ${age} years old.`);
// Output: My name is John and I am 30 years old.
console.log(`In 10 years, I'll be ${age + 10}.`);
// Output: In 10 years, I'll be 40.

Tagged Template Literals

Template literals can be "tagged" by a function that processes the template. The function is called with the processed template and its arguments. This enables advanced string formatting and manipulation.

function customTag(strings, ...values) {
  return strings.join(' --- ') + ' // ' + values.join(' | ');
}
const item = 'book';
const price = 25.99;
console.log(customTag`The ${item} costs $${price}.`);
// Output: The --- costs $25.99. // book | 25.99

Key takeaways

• Template literals are enclosed by backticks (`` ` ``) instead of single or double quotes.

• Template literals allow for string interpolation using `${}` to embed expressions within the string.

• Template literals support multiline strings without the need for escape characters.

• Backticks within a template literal can be escaped using a backslash (\).