Introduction

In JavaScript, string interpolation usually means inserting variables or expressions directly into a string without awkward concatenation. The feature that enables this is the template literal, introduced in ES2015. It makes dynamic strings easier to read, easier to maintain, and much less error-prone than building long strings with +.

Use Template Literals

Template literals are wrapped in backticks rather than single or double quotes.

1const name = "Alice";
2const greeting = `Hello, ${name}!`;
3
4console.log(greeting); // Hello, Alice!

The ${...} part can contain any JavaScript expression, not just a variable name.

This is the modern answer to string interpolation in JavaScript.

Interpolate Expressions, Not Just Variables

You can put calculations and function calls inside the placeholder.

1const price = 19.99;
2const quantity = 3;
3
4const message = `Total: $${(price * quantity).toFixed(2)}`;
5console.log(message); // Total: $59.97

This is more readable than:

const message = "Total: $" + (price * quantity).toFixed(2);

Both work, but template literals scale better as strings become more complex.

Multi-Line Strings

Template literals also support multi-line strings naturally.

1const email = `Hello Alice,
2
3Your order has shipped.
4
5Thanks,
6The Store Team`;
7
8console.log(email);

Before template literals, this often required \n characters or concatenation across several lines.

Escaping Special Cases

Because template literals use backticks and ${...}, you sometimes need to escape those characters intentionally.

To include a literal backtick:

const text = `Use the \`npm install\` command.`;

To include the characters ${ literally:

const text = `The placeholder syntax is \${value}.`;

This matters when generating code samples or templating instructions.

Tagged Templates

A more advanced feature is the tagged template. Instead of producing a string directly, the template is passed to a function.

1function wrap(strings, ...values) {
2  return strings.reduce((result, str, i) => {
3    const value = i < values.length ? `[${values[i]}]` : "";
4    return result + str + value;
5  }, "");
6}
7
8const user = "Alice";
9const text = wrap`User: ${user}`;
10
11console.log(text); // User: [Alice]

Tagged templates are useful in libraries for HTML escaping, localization, styling, or domain-specific formatting. They are not required for ordinary interpolation, but they are worth knowing about.

When Concatenation Is Still Fine

Template literals are usually better for dynamic strings, but concatenation is not wrong for trivial cases.

const file = "report";
const path = file + ".txt";

The main point is clarity. Once multiple variables or expressions are involved, template literals usually win.

They also make conditional text easier to read because the expression can stay inline rather than being split across several concatenated fragments.

Common Pitfalls

The first common mistake is using single quotes instead of backticks:

const name = "Alice";
console.log('Hello, ${name}'); // does not interpolate

That prints the literal characters ${name} because interpolation only works in template literals.

Another issue is assuming interpolation automatically escapes HTML or SQL. It does not. Template literals only build strings. Security still depends on how the result is used.

Developers also sometimes overuse tagged templates when a normal template literal is enough. For everyday UI strings and logs, plain ${...} is usually the right level of power.

Summary

• JavaScript string interpolation is done with template literals.
• Template literals use backticks and ${...} placeholders.
• Placeholders can contain variables, expressions, and function calls.
• Template literals also support clean multi-line strings.
• Interpolation improves readability, but it does not provide automatic escaping or security by itself.