Template Literals (Basics)0%
Defining and Calling Functions

Template Literals (Basics)

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Template Literals (Basics) in JavaScript

Before ES6 (2015), creating dynamic strings or multi-line text in JavaScript required clumsy string concatenation using the plus operator (+) and escape characters (\n). Template Literals (written with backticks `` ... ``) revolutionized string formatting in JavaScript.

1. What are Template Literals?

Template literals are string literals delimited by backticks (` `) instead of quotes (' or "`).

They provide two monumental superpowers:

  1. 1
    String Interpolation: Embedding variables and expressions directly inside strings with ${expression}.
  2. 2
    Native Multi-Line Strings: Preserving newlines and indentation without \n.

2. String Interpolation (${...})

Instead of messy concatenation:

The Old Way (ES5):

JavaScript
const name = "Sumit";
const role = "Full-Stack Developer";
const years = 5;
 
const bio = "My name is " + name + ", I am a " + role + " with " + years + " years of experience.";

The Modern Way (Template Literals):

JavaScript
const name = "Sumit";
const role = "Full-Stack Developer";
const years = 5;
 
const bio = `My name is ${name}, I am a ${role} with ${years} years of experience.`;

Any Valid JavaScript Expression Inside ${...}:

You can perform mathematical calculations, function calls, or ternary logic inside ${}:

JavaScript
const price = 499;
const gst = 0.18;
 
console.log(`Total Price: ₹${price * (1 + gst)}`);
// Total Price: ₹588.82
 
const user = { name: "Neha", isPremium: true };
console.log(`Status: ${user.isPremium ? "VIP Member" : "Standard User"}`);

3. Multi-Line Strings Made Simple

Before template literals, multi-line HTML templates required concatenation on every line:

The Old Way:

JavaScript
var html = "<div class='card'>\n" +
" <h2>Title</h2>\n" +
" <p>Description</p>\n" +
"</div>";

With Template Literals:

JavaScript
const cardHtml = `
<div class="card">
<h2>Course Title</h2>
<p>Learn Full-Stack Development at MSK Institute.</p>
</div>
`;

Every newline, space, and indentation is preserved exactly as written!

4. Escaping Backticks Inside Template Literals

If you need to include a literal backtick inside a template literal, escape it with \`:

JavaScript
const codeSnippet = `Use \`const\` for immutable variable bindings.`;
Interactive Quiz

Practice Quiz

Question 1
What characters are used to enclose a Template Literal in JavaScript?
Question 2
What is the placeholder syntax used to embed variables and expressions inside a template literal?
Question 3
What is the output of const x = 5; const y = 3; console.log(${x} + ${y} = ${x + y});?
Question 4
Can a template literal span across multiple lines without using \n escape characters?
Question 5
Can a ternary operator be embedded inside ${...} in a template literal?
Next Lesson

Defining and Calling Functions

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Common String MethodsDefining and Calling Functions

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext