What are Template Literals and why you should use them?
Tags: javascript, webdev, beginners, node
Published: 2022-02-03 12:48:53

### 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1643888908931/b3ZvLF3nT.jpeg)
Image source: **IOSHacker**
### Benefits
- **Quotes are allowed**

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

```js
const x = "I love \"JS\"" // without template literals

const y = `I love "JS"`
```

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](https://c.tenor.com/TrAsjYbL720AAAAC/chris-pratt-wow.gif)

> FreeCodeCamp has a great explanation on "[Escaping literal quotes in a string](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings)" 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.

```js
const a = 
"I
love 
JS" // ❌

const b = "I\nlove\nJS" // ✅
```


![Here Comes](https://cdn.hashnode.com/res/hashnode/image/upload/v1643890290765/WJDOPSHd3.png)
<center>
<h1>Template Literals</h1>
</center>

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

```js
const multiLineStr = `
I
Love
JavaScript
`
```

- **Variables inside a string**

Usually, we all use plus(+) to concatenate a string with a variable or an expression.
```js
const hello = (name) => {
    return "Hello " + name;
}


const favouriteFood = "Pizza"
console.log("My favourite food is " + favouriteFood)
```

With, **template literals** our tasks become a lot simpler.
```js
const hello = (name) => {
     return `Hello ${name}`;
}

const favouriteFood = "Pizza"
console.log(`My favourite food is ${favouriteFood}`)
```
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.
```js
const sum = (a, b) => {
   return `Sum of ${a} and ${b} is equal to ${a+b}`
}

const PI = `Value of PI is ${Math.PI}`
```

### 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 😊**

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe to me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)