String Interpolation in JavaScript

String interpolation is a great programming language feature that allows injecting variables, function calls, arithmetic expressions directly into a string. String interpolation was absent in JavaScript before ES6. String interpolation is a new feature of ES6, that can make multi-line strings without the need for an escape character. We can use apostrophes and quotes easily that they can make our strings and therefore our code easier to read as well. These are some of the reasons to use string interpolation over string concatenation.

Let’s see the difference between string concatenation and string interpolation.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
// String Concatenation
function myInfo(fname, lname, country) {
    return "My name is " + fname + " " + lname + ". " 
              + country + " is my favorite country."
}
console.log(myInfo("john", "doe", "India"));
</script>

chevron_right


Output:

My name is john doe. India is my favorite country

In string concatenation, it is hard to maintain string as they grow large it becomes tedious and complex. In order to make it readable, the developer has to maintain all the whitespaces. This is where ES6 comes to rescue with String interpolation. In JavaScript, the template literals (strings wrapped in backticks ` `) and ${expression} as placeholders perform the string interpolation. Now we can write above myInfo function with string interpolation.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
// String Interpolation
function myInfo(fname, lname, country) {
    return `My name is ${fname} ${lname}. ${country} is my favorite country`; 
}
console.log(myInfo("john", "doe", "India"));
</script>

chevron_right


Output:



My name is john doe. India is my favorite country

We can see that the code is small and easily readable as compared to concatenation. The template string supports placeholders. The expression like variables, function call, arithmetic can be placed inside the placeholder. These expressions are evaluated at runtime and output is inserted in the string.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
// DEclare and initialize variables
const x = "GeeksforGeeks";
  
// I like GeeksforGeeks
console.log(`I like ${x}.`);
  
// Function call
function greet() {
    return "hello!";
}
  
// hello! I am a student.
console.log(`${greet()} I am a student.`); 
  
// Expression evolution
//sum of 5 and 6 is 11. 
console.log(`sum of 5 and 6 is ${5+6}.`);
  
</script>

chevron_right


Output:

I like GeeksforGeeks
hello! I am a student.
sum of 5 and 6 is 11.

We can also use conditional statements in expression. For example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
function isEven(x) {
    console.log(`x is ${x%2 === 0 ? 'even' : 'odd'}`);
}
  
isEven(4); // x is even
</script>

chevron_right


Output:

x is even

The string interpolation is a great feature. It helps in inserting values into string literals. It makes code more readable and avoids clumsiness.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.