How to do string interpolation in JavaScript?

String interpolation in JavaScript is a process in which an expression is inserted or placed in the string. To insert or embed this expression into the string a template literal is used. By using string interpolation in JavaScript, values like variables and mathematical expressions and calculations can also be added.

The template literal has a dollar sign followed by curly brackets. Inside the curly brackets of this template literal, the expression or the mathematical calculation which is to evaluated and embedded should be written.

Syntax

The syntax of the string interpolation in JavaScript is as follows.

`string where interpolation should be done enclosed in backticks: expression`

In JavaScript by using string interpolation inputs can be inserted into the parts of the strings dynamically by using the placeholders. The traditional approach of inserting variables into the strings doesn’t support the possibility of the inserting the inputs dynamically.

Example 1

This example demonstrates how to use a template literal to interpolate a string in JavaScript.

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}`)

The traditional code for the example 1 will be as,

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)

The above code is the traditional way in which the number of lines is more when compared with the example 1 code. The console command has to be written for 3 times in the traditional way but when the backticks are used and the placeholders are used it is written in only one console. This decreases the code complexity and also the dynamic inputs can be used.

Merging strings, making mathematical calculations, using ternary operators etc., can be performed by using string interpolations.

Example 2

This example demonstrates some of the operations which can be done by string interpolations in JavaScript.

const name1="Abdul"
const name2="Rawoof"
name = `${name1+name2}`
const company = "Tutorials Point"
let salary = 18000
let increment = 2000
let mail = 'abdul@gmail.com'
let experience = 3
console.log("String Concate: Full name is",`${name1 + name2}`)
console.log("String Interpolation",`Employee name is ${name} and the company is ${company}`)
console.log("Using Ternary Operator",`Salary if increment is done based on experience ${experience > 2 ? 20000 : 18000}`)