Template Literals

Template literals, introduced in ES6 (ECMAScript 2015), are a powerful feature for creating and manipulating strings in JavaScript.

They use backticks (`) instead of single (') or double (") quotes, and they make it easier to:

• Embed variables or expressions inside strings
• Multiline strings without escape characters
• Tagged template literals for advanced string processing

Basic Syntax

// Traditional string literals
let singleQuote = 'Hello World';
let doubleQuote = "Hello World";
 
// Template literal
let templateLiteral = `Hello World`;

String Interpolation

The most powerful feature of template literals is string interpolation using ${} syntax.

Basic Interpolation

let name = "Shefali";
let age = 26;
 
// Traditional concatenation
let message1 = "Hello, my name is " + name + " and I am " + age + " years old.";
 
// Template literal interpolation
let message2 = `Hello, my name is ${name} and I am ${age} years old.`;
 
console.log(message2); // "Hello, my name is Shefali and I am 26 years old."

Expression Evaluation

Template literals can evaluate any valid JavaScript expression:

let a = 10;
let b = 20;
 
// Mathematical expressions
let math = `The sum of ${a} and ${b} is ${a + b}`;
console.log(math); // "The sum of 10 and 20 is 30"

Multiline Strings

Template literals let you write multiline strings without needing \n or concatenation.

Traditional Multiline (Before ES6)

// Using \n escape character
let multiline1 = "Line 1\nLine 2\nLine 3";
 
// Using string concatenation
let multiline2 = "Line 1" + "\nLine 2" + "\nLine 3";

Template Literal Multiline

let multiline = `Line 1
Line 2
Line 3`;
 
console.log(multiline);
// Output:
// Line 1
// Line 2
// Line 3
 
// Preserves indentation
let indented = `
    This is indented
        This is more indented
    Back to first level
`;

Nesting Expressions

You can include function calls or even conditional logic inside ${}.

Conditional Logic Inside Template Literals:

const name = "Shefali";
const age = 26;
 
const message = `${name} is ${age >= 18 ? "an adult" : "a minor"}.`;
console.log(message); // Output: Shefali is an adult.

Function Calls Inside Template Literals:

function greet(name) {
  return `Hi, ${name}!`;
}
 
const msg = `Message: ${greet("Shefali")}`;
console.log(msg); // Message: Hi, Shefali!

Tagged Template Literals

Tagged templates let you run a custom function on the template literal before it gets processed.

function highlight(strings, value) {
  return `${strings[0]}<strong>${value}</strong>${strings[1]}`;
}
 
const name = "Shefali";
const sentence = highlight`Welcome, ${name}!`;
 
console.log(sentence); // Welcome, <strong>Shefali</strong>!

• strings is an array of static parts: ["Welcome, ", "!"]
• value is the interpolated value ("Shefali" in this case)

This is commonly used in styling libraries like styled-components or for building custom DSLs (domain-specific languages).

Browser Support

Template literals were introduced in ES6 (2015) and are supported in all modern browsers and Node.js versions. Older browsers like Internet Explorer do not support them.

Escaping Characters

// To include a backtick inside a template literal, use a backslash:  \`. 
// To include  ${ literally, use \${.
 
const str = `This is a backtick: \``;
console.log(str); // This is a backtick: `
 
const literal = `This is a literal \${not an expression}`;
console.log(literal); // Output: This is a literal ${not an expression}

Common Mistakes

• Using quotes instead of backticks:

  const name = "Shefali";
  const wrong = "Hello, ${name}!"; // Output: Hello, ${name}!

  Use backticks instead of quotes.

• Forgetting the ${}:

  const price = 50;
  const msg = `The price is price`; // Output: The price is price

  Use ${price} to embed the variable.

When to Use Template Literals

Use template literals when:

• You need to insert variables into strings.
• You need multiline strings.
• You want readable, cleaner formatting.
• You're building HTML strings or styled content.