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

Copy
const name = 'John';
const age = 30;
// Old way — string concatenation
const msg1 =
  'Hello, ' + name + '. You are ' + age + ' years old.';
// Template literal — much cleaner
const msg2 = `Hello, ${name}. You are ${age} years old.`;

Any JavaScript expression works inside ${}:

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

Multi-line strings

Copy
// Old way — need \n for new lines
const html1 = '<div>\n  <p>Hello</p>\n</div>';
// Template literal — just press enter
const html2 = `
<div>
  <p>Hello</p>
</div>
`;

Expression evaluation

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

Copy
function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
`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.