Template Literals in JavaScript

Analogy categoryAnalogies

1. Introduction

Template literals, introduced in ES6, are string literals delimited by backticks (`) instead of single or double quotes. They allow embedded expressions through interpolation, support multi-line strings without special escape characters, and can be customized further with tagged templates.

🏏

Cricket analogy: Template literals are like a scorecard printed with backticks instead of quotes, letting you drop live values like ${batsman} scored ${runs} directly into the sentence and even span multiple lines without special line-break codes.

2. Syntax

javascript

const name = "Ava";
const greeting = `Hello, ${name}!`;

const multiline = `Line 1
Line 2`;

function tag(strings, ...values) {
  return strings.raw.join('|') + values.join(',');
}
tag`Value: ${1} and ${2}`;

3. Explanation

Inside a template literal, any expression placed inside ${ ... } is evaluated and converted to a string, then inserted at that position — this is called interpolation and it replaces older, more error-prone string concatenation with +. Because backtick strings preserve literal newlines, you can write multi-line strings directly without \n escape sequences or string concatenation across lines.

🏏

Cricket analogy: Interpolation lets you write ${player} hit ${sixes} sixes instead of stitching 'player' + ' hit ' + sixes + ' sixes' with plus signs, and the backtick string keeps line breaks between overs literal, no \n needed.

A tagged template is a function call written as functionNametemplate. The function receives the literal string pieces (as an array, with a .raw property containing the unescaped source text) as its first argument, followed by the evaluated interpolated values as additional arguments, enabling custom processing such as sanitization or localization.

🏏

Cricket analogy: A tagged template is like handing a commentator the raw phrase pieces 'Over ' and ' bowled by ' separately along with the interpolated player name, so the commentator can translate or censor before announcing it.

Gotcha: ${ } only evaluates JavaScript expressions, not statements — you can call functions and use ternaries inside it (e.g. ${isAdmin ? 'Admin' : 'User'}), but you cannot put an if statement or a variable declaration inside the braces. Also, template literals are still just strings — ${a} == a is true or false depending only on type coercion rules, since the interpolated result is always converted to a string first.

4. Example

javascript

const name = "Ava";
const age = 28;
console.log(`Hello, my name is ${name} and I am ${age} years old.`);

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

const multiline = `Line 1
Line 2`;
console.log(multiline);

function tag(strings, ...values) {
  return strings.raw.join('|') + ' -- ' + values.join(',');
}
console.log(tag`Value: ${a} and ${b}`);

5. Output

text

Hello, my name is Ava and I am 28 years old.
The sum of 5 and 10 is 15.
Line 1
Line 2
Value: | and | -- 5,10

6. Key Takeaways

Template literals use backticks (`) instead of quotes and support ${expression} interpolation.
Interpolated expressions are evaluated and converted to strings automatically, replacing manual + concatenation.
Template literals preserve real line breaks, enabling multi-line strings without \n.
${ } only accepts expressions, not statements like if or variable declarations.
Tagged templates (tag...) let a function customize how a template literal's pieces and values are combined.