How to do string interpolation in JavaScript?

String interpolation in JavaScript is a process in which expressions and variables are embedded directly into strings. This is achieved using template literals (backticks) with placeholder syntax ${}, making code more readable and maintainable than traditional string concatenation.

Template literals use backticks (`) instead of quotes and allow expressions to be embedded using ${expression} syntax. This enables dynamic content insertion, mathematical calculations, and complex expressions within strings.

Syntax

`string text ${expression} more text`

The expression inside ${} can be variables, function calls, mathematical operations, or any valid JavaScript expression that returns a value.

Basic String Interpolation

This example demonstrates how template literals simplify variable embedding compared to traditional concatenation:

const name = "Abdul Rawoof";
const company = "Tutorials Point";
let salary = 18000;
let increment = 2000;
let mail = 'abdul@gmail.com';

console.log(`Employee name is ${name} and the company is ${company}
Salary of ${name} after increment is ${increment}: ${salary + increment}
Contact details of ${name} is ${mail}`);

Employee name is Abdul Rawoof and the company is Tutorials Point
Salary of Abdul Rawoof after increment is 2000: 20000
Contact details of Abdul Rawoof is abdul@gmail.com

Traditional String Concatenation (Comparison)

The equivalent code using traditional concatenation requires multiple operators and is harder to read:

const name = "Abdul Rawoof";
const company = "Tutorials Point";
let salary = 18000;
let increment = 2000;
let mail = 'abdul@gmail.com';

console.log("Employee name is " + name + " and the company is " + company);
console.log("Salary of " + name + " after increment " + increment + " is " + (salary + increment));
console.log("Contact details of " + name + " is " + mail);

Employee name is Abdul Rawoof and the company is Tutorials Point
Salary of Abdul Rawoof after increment 2000 is 20000
Contact details of Abdul Rawoof is abdul@gmail.com

Advanced String Interpolation

Template literals support complex expressions, function calls, and conditional operations:

const name1 = "Abdul";
const name2 = "Rawoof";
const company = "Tutorials Point";
let salary = 18000;
let increment = 2000;
let experience = 3;

console.log(`String Concatenation: Full name is ${name1 + " " + name2}`);
console.log(`Mathematical Operation: New salary is ${salary + increment}`);
console.log(`Conditional Logic: Salary based on experience is ${experience > 2 ? 25000 : 18000}`);
console.log(`Function Call: Name length is ${(name1 + name2).length} characters`);

String Concatenation: Full name is Abdul Rawoof
Mathematical Operation: New salary is 20000
Conditional Logic: Salary based on experience is 25000
Function Call: Name length is 11 characters

Comparison of Approaches

Key Benefits

Template literals offer several advantages: cleaner syntax, better readability, native multi-line support, and the ability to embed complex expressions directly. They eliminate the need for multiple + operators and make string building more intuitive.

Conclusion

String interpolation with template literals provides a modern, readable way to build dynamic strings in JavaScript. Use ${} syntax within backticks for cleaner code compared to traditional concatenation methods.