DEV Community

Passionate Coder
Passionate Coder

Posted on

Template Literals in ES6

Uses/ Benefits

1) Template literals are used to concatenate strings.
2) Placeholders/variables can be easily interpolated with template literals.
3) Makes code more readable and Clean

How to write

4) Strings or placeholders needs to be wrapped inside backtick
5) variables needs to wrapped like ${variable}

Usecases

1) Display : The sum of 10 and 15 is 25.

let a = 10;
let b = 15;

"The sum of "+a+" and "+b+" is "+(a+b) +"." // ES5
`The sum of ${a} and ${b} is ${a+b}` // ES6
Enter fullscreen mode Exit fullscreen mode

2) Display :
I am a Developer.
I love to code.

"I am a Developer.\nI love to code." // ES5
`I am a Developer. 
 I love to code.` // ES6 no need to use \n for new line. It will keep format same as written
Enter fullscreen mode Exit fullscreen mode

3) Display : Let's code together

"Let's code together"  // ES5
'Let\'s code together' // ES5
`Let\'s code together` // ES6
Enter fullscreen mode Exit fullscreen mode

For more information follow
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

You can also watch this:

Top comments (1)

Collapse
 
frontendengineer profile image
Let's Code • Edited

nice Moni! Would like to add another material to help the community