What are template literals?

Strings written with backticks instead of quotes, which adds two things ordinary strings cannot do: interpolation and real line breaks.

const name = "Mai";
const items = 3;

const message = `Hello ${name}, you have ${items} item${items === 1 ? "" : "s"}.`;

const block = `Line one
Line two`;                    // newline is preserved literally

Anything inside ${ } is an expression, not just a variable — function calls, arithmetic and ternaries all work. Keep them short though; a nested ternary inside a template is hard to read, and a plain variable computed above the string usually wins.

Compared to concatenation

"Hello " + name + ", you have " + items + " items"
`Hello ${name}, you have ${items} items`

The second is shorter and, more importantly, keeps the shape of the sentence visible.

Details worth knowing

Values are converted with String(), so an object becomes "[object Object]" unless you convert it yourself. null and undefined interpolate as the literal text "null" and "undefined" rather than an empty string — a common source of "Hello undefined" in production.

Indentation inside a template is part of the string, so a multi-line template inside an indented function carries that whitespace. Use .trim(), or a dedent helper, when the exact text matters.

Escape a literal backtick or ${ with a backslash: \`` and ${`.

The security point

Interpolation does no escaping. Building HTML or SQL with a template is exactly as unsafe as concatenation:

el.innerHTML = `<p>${userInput}</p>`;    // XSS
db.query(`SELECT * FROM t WHERE id = ${id}`);   // SQL injection

Use textContent and parameterised queries. A tagged template can escape for you, which is how libraries add safety on top of this syntax.