How to use string interpolation in Javascript

In this article, you will learn about JavaScript string interpolation.

In JavaScript, string interpolation is the process of evaluating a string literal containing one or more placeholders and expecting the result in which the placeholders are replaced with their desired values. In simple terms, it is the process of embedding an expression into part of a string.

You generally use single quote(‘ ‘) or double quote (” “) to write a string literal. For example :

const firstName = 'deven' // using single quote
console.log(firstName) // deven

const lastName = "rathore" // using double quote
console.log(lastName) // rathore

You can concatenate these two strings by using an expression + operator.

const firstName = 'deven'
const lastName = 'rathore'

console.log('My first name is' + firstName + 'and last name is' + lastName 
// Output : My first name is deven and last name is Rathore

Now imagine if you have to construct a lengthy string, your code will get messy and will not be able to track it.

You can get rid of this unwanted situation by using a template string. To interpolate string in JavaScript you can simply use template string which makes string in JavaScript lots easier. It is an ES6( ECMAScript 6) feature. To use it you have to use backtick( ) and wrap your string into this and ${expression} as a placeholder. For example :

const lastName = "Rathore"

console.log(`My first name is ${firstName} and last name is ${lastName}`)

// Output : My first name is deven and last name is Rathore

Your code is now a lot more clean and easy to understand.

You can use more complex expressions in the placeholder of a template string. Lets follow the below code example :

const a = 10
const b = 30

console.log(`The sum of ${a} and ${b} is ${a+b}`)

//Output : The sum of 20 and 30 is 50

You can see how useful the template string is and your life becomes a lot easier while working with string interpolation in JavaScript. This is how you can interpolate strings in JavaScript.