DEV Community

loading...

Template Literals in ES6

moni_coder profile image Moni ・1 min read

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:

Discussion (1)

pic
Editor guide
Collapse
angelomiranda profile image
angelo.miranda • Edited

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