Template Literals in Javascript
In this blog we are going to understand about strings. Yes, strings template literals are nothing they are a another way to write strings. We are going to understand and answer these following questions What are template literals ? Why we need them? How they are different from normal strings?
What are Template Literals?
In Javascript we have strings as a datatype and whenever we have to write string we use double quotes (" ") and single quotes (' '). Template Literals are just another way of writing strings. Here in template literals we use back ticks (` `) for writing strings. So, this answers our first question What are template literals. Now lets understand Why we need them?
Why we need Template Literals?
Earlier when we used double quotes or single quotes for writing strings in most of the cases they works but their were some cases like writing double quotes inside strings the computer used to get confused in that case and it interprets it as of ending of old string and starting of new string. And their were many such problems which we are going to discuss further in this blog about older string writing methods which template literals solved.
Problems Which Template Literals Solved
Their are several of them so we are going to see them one by one:
String Concatenation
Older String methods which uses double and single quotes uses + operators for string concatenation. So, if we wants to concatenate multiple strings and variables. This process is not developer friendly, it is prone to mistakes and it also looks messy. Lets see one example
const country = "India";
const capital = "New Delhi"
console.log("I am from "+ country+ " and it's capital is " + capital )
--------------------------------------------------------
OUTPUT:
I am from India and it's capital is New Delhi
See, this looks messy right.
Now let's see how the same code looks when written with template literals
[NOTE]: For having a reference of variable inside string written using template literals we use ` ${} ` this syntax.
const country = "India";
const capital = "New Delhi"
console.log(`I am from \({country} and it's capital is \){capital}`)
--------------------------------------------------------
OUTPUT:
I am from India and it's capital is New Delhi
There is no + operator everything is inside ` ` string.
Multiple Lines
Older version do not support multi line string whereas template literals supports multi-line string lets take an example of html
const html = `<div>
<h1> This is heading</h1>
<p> This is paragraph </p>
</div>`
Writing " " in string
When writing string with normal quotes you cannot write double quotes inside string as it will interpret it as ending of previous string and start of another string.
console.log("This book is written by "John Spencer"")
//This will throw Error
//Correct Way of doing thing
console.log("This book is written by \"John Spencer\"")
//This works
Whereas if you do same thing with template literals
console.log(`This book is written by "John Spencer"`)
You can Write Javascript inside of String
If you have two variable let's say number and you want to add them and show them in the console and you have to compute them inside string it's not possible but you can do this with template literals.
Template Literals allows you to write javascript inside of string and we can compute sum of two variable inside string.
const a = 10;
const b = 20;
console.log(`The sum of a \({a} and b \){b} is ${a+b}`)
---------------------------------------------------------
OUTPUT:
The sum of a 10 and b 20 is 30
Conclusion
Since we have template literals doesn't means that ("..." & ' ... ') are deprecated we also use them. It totally depend on the scenario in which you wants to write string if you wants to add references of variable write JS inside string then you should use template literals otherwise you can use normal string methods.
