JavaScript Escape Quotes

In this tutorial, you will learn how to escape quotes in JavaScript.

Need of escape quotes JavaScript

To define a string in JavaScript we use single quotes (' ') or double quotes (" "). For example 'Hello World' or "Hello World".

var str1 = 'Hello World'; // ✅
var str2 = "Hello World"; // ✅

When you display these strings on browser these quotes are not displayed.

The problem arises when we want to display quotes within the string. For example, "The book "World" is on the table." or 'The book 'World is on the table.'.

You may be thinking what is the problem? Just put the quote whereever you want. But this is wrong. This will cause syntax error.

var str1 = "The book "World" is on the table.""; // ❌
var str2 = 'The book 'World is on the table.''; // ❌

The above strings are not valid because when you write another quote within the string, javascript will think that it is the end of the string. And characters after the quote will cause an error.

1. Using Opposite Quotes

One way to solve this problem is to use opposite quotes. This means if you want to show double quotes within the string then use single quotes to enclose the string and vice versa.

// want to show single quotes
// then use double quotes to enclose string
var str1 = "The book 'World' is on the table."; ✅

// want to show double quotes
// then use single quotes to enclose string
var str2 = 'The book "World" is on the table.'; ✅

But there is a problem with this. What if you want to display a mixture of single and double quotes within the string. Then again string will become invalid.

To solve this problem we use escape characters.

2. Escape characters in JavaScript

Escape characters are special characters that are used to escape other characters. There are many escape characters in JavaScript. But we will discuss only the ones that are used to escape quotes which is backslash (\).

The escape character (\) in a string indicates that the character preceding it should be taken literally and not be interpreted as a special character.

The character preceding \ (quotes in this case) performs no role in the string like start and end quotes. It is printed as it is.

Look at the table below.

Let's see some examples of how to use escape characters.

Example 1: Escape single quotes within the string.

// 2 ways to show single quotes in string

// 01. escaping quote using backslash
var str1 = 'I\'ll be back.';
console.log(str1);

// 02. using double quotes as string encloser
var str2 = "I'll be back.";
console.log(str2);

Example 2: Escape double quotes within the string.

// 2 ways to show double quotes in string

// 01. escaping quote using backslash
var str1 = "The book \"World\" is on the table.";
console.log(str1);

// 02. using single quotes as string encloser
var str2 = 'The book "World" is on the table.';
console.log(str2);

Example 3: Escape both single and double quotes within the string.

// only 1 way to show both single and double quotes in string
// use escape character (\)

var str1 = "The book \"World\" is on the table. I'm going to read.";
console.log(str1);

var str2 = 'The book "World" is on the table. I\'m going to read.';
console.log(str2);

3. Using backticks to escape quotes

The backticks (``) are another way to enclose a string in javascript. When a string is enclosed with backticks then it can be used for multiple different purposes. One of them is to escape quotes.

When using backticks to enclose a string, you can use both single and double quotes within the string without escaping them.

Let's see an example that uses backticks and needs no escape character.

// using backticks to enclose string
var str = `Here is a book called "World". I'm going to read it.`;
console.log(str);

You can see above the string contains both single and double quotes but with backticks, we need not escape it.