How to Escape a String in JavaScript

In this tutorial, we will explore the concept of string escaping in JavaScript.

What is a string?

A string in JavaScript is a data type used to hold characters, symbols, or numeric values. Textual information is stored within a string data type and can be defined using either single or double quotation marks.

What is a string escaping?

String escaping is a technique used to interpret special characters as literal characters. It is employed to include a special character by escaping a string.

Let's explore the importance of string escaping through an example.

The following is the string which shows an error:

let quote = "Welcome, "Learn online from JTP!"";

Output:

SyntaxError: Unexpected identifier

The reason for this error occurring is the utilization of double quotation marks twice, a practice not compatible with JavaScript. It is possible to rectify this error by employing character escaping in JavaScript.

The following are the methods used to escape a string:

• ✅ Escape character
• ✅ Opposite string syntax
• ✅ Template literals

Each technique will be thoroughly explained through practical examples.

Utilizing the Escape Character (\)

The backslash serves to indicate that the subsequent character should be interpreted as a regular character rather than a special one, enabling us to include the backslash (\) itself in a string as an escape sequence.

In the presence of a specific character after a backslash, it transforms into an escape sequence, as illustrated below:

\\ - Backslash

\" - Double Quotes

\' - Single Quotes

\n - Newline

\t - Tab

\t - Carriage return

Demo 1:

Let's create a string variable called "escString" containing single quotation marks and an apostrophe within a sentence. To handle this, we will use the escape character (\') in the string declaration.

Code:

var apostrophe = 'It\'s a rainy day.';
console.log(apostrophe);

Output:

It can be observed that the string is escaped using the escape sequence (\').

It's a rainy day.

Demo 2:

Let's create a string variable called "quote" that contains a pair of double quotation marks within a sentence. To interpret the double quotes as regular characters, we will use the escape sequence (\") in the string.

Code:

var quote = "She said, \"I like mathematics!\"";
console.log(quote);

Output:

It is observable that the string has been escaped using the escape sequence (\").

She said, "I like mathematics!"

Demo 3:

The escape sequence (\n) is used to move to a new line and escape a string in programming.

Code:

var line = "It is line 1. \nIt is line 2.";
console.log(line);

Output:

It is observable that the string has been escaped using the escape sequence (\n).

It is line 1. 
It is line 2.

Demo 4:

Escape sequences like (\t) are employed to insert a tab space within a sentence.

Code:

var tab = "Hi, \t How are you?";
console.log(tab);

Output:

It can be observed that the string is escaped by using the escape sequence (\t).

Hi, 	 How are you?

Utilizing the Opposite String Syntax

To escape a string, we have the option to employ the contrary string syntax. It is possible to utilize either single quotes or double quotes for this purpose.

Demo 1:

The task involves enclosing a string within double quotation marks to include single quotation marks and escape a string.

Code:

var quote = 'He said, "I learned from JTP!"';
console.log(quote);

Output:

It can be observed that the string is escaped by using single quotes to enclose the string that contains double quotes.

He said, "I learned from JTP!"

Demo 2:

Placing a string within double quotation marks is a technique used to handle apostrophes within the string.

Code:

var apostrophe = "It is a wonderful day, isn't it?";
console.log(apostrophe);

Output:

It is evident that the string has been properly escaped by enclosing it in double quotes to include the apostrophe within the string.

Output:

It is a wonderful day, isn't it?

Utilizing the Template Literals (Backticks)

Template literals, denoted by backticks ( ), offer a way to escape a string.

Demo 1:

The objective is to enclose the string containing double quotes within backticks and then escape the string.

Code:

var quote = `He said, "I am here to teach you JavaScript!"`;
console.log(quote);

Output:

It is observable that the string has been escaped by enclosing the string with double quotes using backticks.

He said, "I am here to teach you JavaScript!"

Demo 2:

To escape the string, we will enclose it in backticks and include an apostrophe within the string.

Code:

var apostrophe = `It's a beautiful necklace.`;
console.log(apostrophe);

Output:

It is observable that the string has been escaped by enclosing the string with the apostrophe in backticks.

It's a beautiful necklace.

Conclusion:

In this guide, we have explored the methods of escaping strings in JavaScript. There are three techniques available for string escaping: using escape characters, employing the inverse string syntax, and leveraging template literals. Each approach has been thoroughly explained with examples to facilitate understanding and application as needed.