What are template literals?

The short answer

Template literals are strings wrapped in backticks (`) instead of quotes. They support string interpolation with ${}, multi-line strings without escape characters, and tagged templates for custom processing. They were introduced in ES6 and are the preferred way to build strings in modern JavaScript.

String interpolation

1const name = 'John';
2const age = 30;
3
4// Old way — string concatenation
5const msg1 =
6  'Hello, ' + name + '. You are ' + age + ' years old.';
7
8// Template literal — much cleaner
9const msg2 = `Hello, ${name}. You are ${age} years old.`;

Any JavaScript expression works inside ${}:

1`Total: $${(price * quantity).toFixed(2)}`;
2`Status: ${isActive ? 'Active' : 'Inactive'}`;
3`Items: ${items.length}`;

Multi-line strings

1// Old way — need \n for new lines
2const html1 = '<div>\n  <p>Hello</p>\n</div>';
3
4// Template literal — just press enter
5const html2 = `
6<div>
7  <p>Hello</p>
8</div>
9`;

Expression evaluation

You can put any expression inside ${}, including function calls:

1function capitalize(str) {
2  return str.charAt(0).toUpperCase() + str.slice(1);
3}
4
5`Hello, ${capitalize(name)}!`; // "Hello, John!"

Why interviewers ask this

This tests basic ES6 knowledge. Template literals are used everywhere in modern JavaScript, and interviewers want to confirm you know the syntax.