Template Literals Explained

Key Concepts

• Basic Syntax
• Expression Interpolation
• Multi-line Strings
• Tagged Templates
• Raw Strings
• Nesting Templates

Basic Syntax

Template literals are enclosed by backticks () instead of single or double quotes. They allow for embedding expressions and multi-line strings without needing to concatenate strings manually.

Example:

let name = "Alice";
let greeting = Hello, ${name}!;
console.log(greeting); // Outputs: Hello, Alice!
    

Expression Interpolation

Expression interpolation allows you to embed expressions within template literals using the ${} syntax. This makes it easier to include variables, function calls, and other JavaScript expressions directly within the string.

Example:

let a = 5;
let b = 10;
let result = The sum of ${a} and ${b} is ${a + b}.;
console.log(result); // Outputs: The sum of 5 and 10 is 15.
    

Multi-line Strings

Template literals support multi-line strings without needing to use escape characters or concatenation. This makes it easier to write and maintain long strings with line breaks.

Example:

let multiLine = This is a
multi-line
string.;
console.log(multiLine);
    

Tagged Templates

Tagged templates allow you to parse template literals with a function. The first argument of the function is an array of string literals, and the subsequent arguments are the evaluated expressions.

Example:

function tagFunction(strings, ...values) {
    return strings[0] + values.join(' ') + strings[1];
}
let name = "Bob";
let age = 30;
let output = tagFunctionHello, ${name}! You are ${age} years old.;
console.log(output); // Outputs: Hello, Bob! You are 30 years old.
    

Raw Strings

The String.raw tag function is used to get the raw string form of template literals, without processing escape characters. This is useful when you want to include literal backslashes or other escape sequences.

Example:

let rawString = String.rawC:\Users\Admin\Documents;
console.log(rawString); // Outputs: C:\Users\Admin\Documents
    

Nesting Templates

Template literals can be nested within each other, allowing for more complex string interpolation. This can be useful for dynamic content generation.

Example:

let isMember = true;
let message = Welcome, ${isMember ? member : guest}!;
console.log(message); // Outputs: Welcome, member!