Template Literals in JS

Before starting with template literals or string concatenation, there is something which i want to wonder for a bit,

Why do we needs variables in the string?

Life was fine where we just write normal strings and life is also fine when we just write variables inside the string through which manner it doesn't matter for now. So, why writing variables becamed an importhing thing in the programming world?

The simple answer is: Dnyamic Content

As enginners we all relie on one core principle while writing programs which is DRY - DON'T REPEAT YOURSELF, this simply means once you write a piece of code, never re-write it again. Just re-use it again. And this is the main reason of having variables in the string, Reusability.

For example,

You have drafted an invitation letter entierly as a static string, Hello tushar, I would like to invite you to this party. But you want to send this to abhijeet for that you need to rewrite the whole string again.

But what if I tell you that instead of creating 100s of invitation string, create a function named invite with a parameter name and in place of tushar attached this name variable so that you can simply calls the function invite("abhijeet") without having the need to write the whole string again.

Dynamic content is the goal. So, let's look at the different ways to achieve this in JavaScript.

Different way to attach variables in strings?

Now, we know the importance of having variables in our string. Let's look at the different method through which we can do that, primarily there are two ways

1. The traditional method - ES5

2. The modern method - ES6

For those wondering, "What is ES5 or ES6?"—JavaScript is the language, but ECMAScript (ES) is the official rulebook for that language. All the syntax descriptions and rules for writing JS come from ECMAScript. ES5 and ES6 are simply different, updated versions of that rulebook.

The traditional method - String Concatenation

In ES5, we used to take different strings and concat them together using the + operator. Like this,

let name = "tushar"

function greet(name) {
    console.log("Hello," + name + ". How are you?")
}

Life was going fine but there were many problems with this way of writing the code. Let me tell you,

• Speed of writing code
  When there is only one line of code it doesn't matter but imagine you are writing whole HTML templates for mail to be sent after hitting an particular API route, so everything you need to " start the quotes, write the content, end the quotes " and use + operator to add variable and repeat the whole process again and again which ruins the whole experience of writing the code and slows you down.

• Manual judgement of spaces, full stops and other characters
  When you are concatenating stuff you need to manually calculate like how the formatted string will look like and try to replicate it? But there are high chances that there will be time where you make an error of judgement and this might result in serious actions when the stakes are high. And if you have templates like its pretty easy to make an error.

• Debugging
  When you accidentaly did something wrong? How will you debug there are 100s of different strings which are concatenated together and you know which part is causing the error but finding that part is a real massive headache and that too when you have to do is on daily basis.

• Repeative Iterations
  Adding two things is never perfect. So, you need to run the code again and again in order to check the result and this leads to wastage of crucial resources.

Now, we have talked enough about the problems. Let us take a look at the solution.

The modern way - Template Literals

When ES6 arrived it solved the string concatenation issue with the template literals now writing variables in string simply means writing a normal text message and using a syntax to add variables into it.

Syntax:

So, ES6 told us to use template literals we need to take care of two things,

1. That while writing we will use backticks(` `) instead of using single or double quotes. You will find these are the leftmost-top corner of your keyboard below the 'esc' key.

2. And for concatenating variables we will use ${variable name} inside the string created using backticks.

const greet = (name) => {
    console.log(`Hello, ${name}. How are you doing?`)
}

Advantages:

• What you see is what you get
  We don't need to worry about how the output will look like we can simply just write it like a message.

• Easier debugging
  Now, we don't need to worry about handling and debugging 100s of different strings. We have just one string and everything is written inside that and without even running the code we know what it is gonna look like.

• Natural Spacing
  We don't need to predict that were the spacing and the characters will come we can just simply write them down. It also makes the whole process of writing code simple, as we don't need to deal with complications of adding things we all know how JS works.