Template literals

Mixing text and variables with backticks — cleaner than + concatenation.

Lesson 1.5of 24

Step 1

The idea

Have you played Mad Libs? You're given a sentence with blanks and you fill them in: "My name is ___ and I live in ___."

In the old way to write JavaScript strings, combining text and variables looked messy:

console.log("Hello, " + name + "! You are from " + city + ".");

Template literals are the modern, readable version — you use backticks (`) instead of quotes, and drop variables in with ${}:

console.log(`Hello, ${name}! You are from ${city}.`);

Same result. Much cleaner.

Step 2

See it run

Output

Hello, Priya! You are from Hyderabad.
Your test score is: 95 out of 100
Test status: PASSED

template-literals.js

const name = "Priya";
const city = "Hyderabad";
const score = 95;
const passed = true;

console.log(`Hello, ${name}! You are from ${city}.`);
console.log(`Your test score is: ${score} out of 100`);
console.log(`Test status: ${passed ? "PASSED" : "FAILED"}`);

Terminal

$ node template-literals.js

Notice the last line: you can even put logic inside ${}. Anything that produces a value works.

Step 3

Now you try

Copy the file above. Change score to 45 and run it again. Does the status change to FAILED? It should.

Then add a new line using a template literal that prints: "Priya completed the test in Hyderabad." using only the existing variables — no typing the names manually.

Step 4

Why a tester cares

Template literals shine whenever you need to build strings from data — reports, log messages, file names. Here's a simple grade report generator:

report.js

const students = [
  { name: "Priya", score: 92 },
  { name: "Rahul", score: 65 },
  { name: "Anita", score: 48 },
];

for (const s of students) {
  const status = s.score >= 60 ? "PASS" : "FAIL";
  console.log(`${s.name}: ${s.score}/100 — ${status}`);
}

Terminal

$ node report.js

Output

Priya: 92/100 — PASS
Rahul: 65/100 — PASS
Anita: 48/100 — FAIL

Without template literals this would be messy string concatenation. With backticks, you can read each line and immediately understand what it prints.

Recap

3 key points

1Template literals use backticks (`) instead of quotes.
2Drop variables or expressions in with ${value} — no + signs needed.
3They make dynamic strings in Playwright tests (URLs, messages, assertions) far cleaner.

Up next

Lesson 1.6 — Comparison operators

Data types

Comparison operators