JavaScript Lesson: Template literals vs single/double quotes string

With This knowledge bit, we are going to learn a very interesting topic regarding string in JavaScript. So here we are going to discuss template literals and how template string is different from single and double quote string. We will also learn how we can use back-ticks string.

Template literals vs single/double quotes string

So in the previous knowledge bit, we have studied strings properties, and how we can use strings in our JavaScript code. So in JavaScript, there is basically three way to write a string, you can write string by using single quotes (‘ ’), double quotes(“ ”) and Backticks (` `). Both sides of quotes starting and ending should be same.

Single quote and double quote string are almost same and they behave in an exactly same way, but the backticks aka template string is a little bit different from single and double quotes.

ES6 introduced a new type of string that is Template string which supports multi-line string and string interpolation, to write template string we use grave accent character (` `).  Since template string defined with backticks, you can use both single and double quotation inside backtick. So here we talk about template literals and how it is different from normal strings.

Expression interpolation

So when we have to call some variable or when we have to embed any character inside our string we use concatenation + sign like the following syntax:

var name = 'Geeks';

'Hello ' +name+ '! Welcome to GeeksRead.


So it’s a bit tricky, you have to break your string in between to write an expression. Many languages allow to use an expression within a string, but now with template literal, you are able to use placeholder inside your string. So backtick allows us to use expression inside (“) character, the expression should be wrapped in ${our_expression}. Here is a syntax which we have demonstrated below:

var name = 'Geeks';

`Hello ${name}! Welcome to GeeksRead.`;


Javascript Lesson - Template literals vs single/double quotes string

Template literals still allow you to concatenate your string, here is a code below:

var name = 'Geeks';

`Hello `+name+`! Welcome to GeeksRead.`;


The ${expression } works perfectly almost for every expression.

Multiline Strings

It’s really annoying to write the string in multiple using Single or double quote string, we would have to use the following syntax to get multiple line string.

console.log('Its a Line: 1\n' +

'Its a Line: 2\n'+

'Its a Line: 3');

So with a regular string, we need to use \n newline escape character, and it’s really tiring to use \n character every time when we want to move our string in next line. But ES6 update you just only need to use backticks (` `) and you can use newline without further using any character or concatenation, here is an example:

console.log(`Its a Line: 1
It's a Line: 2
It's a Line: 3`);       

So it really easy to use a multiline string in JavaScript with backticks, so you can stretch your string in multiple lines and can use interpolated expressions simultaneously.

Escaping Character

There is not much difference in escaping character in single, double quotes and backtick string. We can’t use a single quote inside of single quote and double quote inside a double quote, similarly, with backticks, we can’t use backticks within backticks. So to do that we use escape character.
The single quote (‘) and double quote (“), we commonly used this quotes in the English language, but we barely use backticks in English, so we can use single and double quote inside backticks. So let see how we can use escape character.

Here is how we can use double quote inside of double quote character.

Here is demonstration below where you can see that how we can use back-tick inside of a back-tick string

So with this knowledge bit, we went over strings and how regular strings are different from template literal strings. We have discussed how we can write strings in multiple lines, and how we can escape character. We have also discussed interpolation expression.

You can have a look at our whole JavaScript series as well.

Click to comment

Most Popular

To Top