DEV Community

Cover image for What are Template Literals and why you should use them?
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

What are Template Literals and why you should use them?

#node #webdev #javascript #beginners

Hello Folks 👋

What's up friends, this is SnowBit here. I am a young passionate and self-taught frontend web developer and have an intention to become a successful developer.

In this article, I will be explaining a very useful topic in Javascript - Template Literals.

What are template literals?

  • In Javascript, template literals use backticks to define a string instead double ("") and single('') quotes.
  • Template literals is an ES6 feature introduced back in 2015

Mac-Print-screen-keyboard
Image source: IOSHacker

Benefits

  • Quotes are allowed

When using template literals, you can use both double and single quotes inside a string.

const x = "I love \"JS\"" // without template literals const y = `I love "JS"`
Enter fullscreen mode Exit fullscreen mode

As you can see, it is too complex to escape literal quotes assigned to variable x. And it is too simple to use quotes inside a string with template literals.

awesome

FreeCodeCamp has a great explanation on "Escaping literal quotes in a string" the thing that I have done on variable "x" in the above code snippet

  • Multi-line strings

Usually, you cannot write a multi-line string with double and single quotes in Javascript. Instead, you have to use \n to break a line.

const a = "I love JS" // ❌ const b = "I\nlove\nJS" // ✅
Enter fullscreen mode Exit fullscreen mode

Here Comes

Template Literals

You can write multi-line flawlessly with Template Literals without any limitations.

const multiLineStr = ` I Love JavaScript `
Enter fullscreen mode Exit fullscreen mode
  • Variables inside a string

Usually, we all use plus(+) to concatenate a string with a variable or an expression.

const hello = (name) => { return "Hello " + name; } const favouriteFood = "Pizza" console.log("My favourite food is " + favouriteFood)
Enter fullscreen mode Exit fullscreen mode

With, template literals our tasks become a lot simpler.

const hello = (name) => { return `Hello ${name}`; } const favouriteFood = "Pizza" console.log(`My favourite food is ${favouriteFood}`)
Enter fullscreen mode Exit fullscreen mode

When passing variables in template literals, a variable must be enclosed by curly braces and preceded with a dollar symbol($).

  • Expressions in a string

With template literals, one can pass expressions in a string just like variables.

const sum = (a, b) => { return `Sum of ${a} and ${b} is equal to ${a+b}` } const PI = `Value of PI is ${Math.PI}`
Enter fullscreen mode Exit fullscreen mode

Should you use template literal?

Yes. Seeing this many benefits 🤩 pulls me to use template literal. Let me know your thoughts about using it in the comments below, I will be glad to read your comments

Thank you for reading, have a nice day!
Your appreciation is my motivation 😊

Top comments (0)