How to Escape Special Characters in a String in JavaScript

In JavaScript, certain characters have special meanings and are used to represent various values and formatting within a string. For example, the double quote (“) character is used to indicate the beginning and end of a string. If a string contains a double quote character as part of its value, JavaScript would interpret it as the end of the string, which can lead to errors in your code.

To avoid these errors, special characters need to be “escaped” so that JavaScript will treat them as literal characters within the string rather than interpreting them as having a special meaning or purpose.

Using the backslash character

Using the backslash character (/) is the primary way to escape special characters within a string in JavaScript and other programming languages. Let’s examine a couple of examples below for more clarity.

Example 1: Escaping double quotes

The code:

const stringWithDoubleQuotes = "This is a \"string\" with double quotes";
console.log(stringWithDoubleQuotes);

Output:

This is a "string" with double quotes

Example 2: Escaping single quotes

The code:

const stringWithSingleQuotes = 'Welcome to \'Sling Academy\', a place to learn JavaScript!';
console.log(stringWithSingleQuotes);

Output:

Welcome to 'Sling Academy', a place to learn JavaScript!

Example 3: Escaping backslashes

The code:

const stringWithBackslashes = "This is a string with a backslash \\";
console.log(stringWithBackslashes); 

Output:

This is a string with a backslash \

Using template literals

A template literal is a string that uses backticks (`) instead of single or double quotes. Template literals allow you to include variables and expressions within a string using ${var} syntax, and you can also include special characters without needing to escape them.

Example:

const stringWithSpecialChars = `Welcome to 'slingacademy.com'. This is a string with "double" and 'single' quotes, and backslashes: \\`;

console.log(stringWithSpecialChars);

Output:

Welcome to 'slingacademy.com'. This is a string with "double" and 'single' quotes, and backslashes: \

Using the String.fromCharCode() method

The String.fromCharCode() method returns a string created by using the specified sequence of Unicode values. You can use this method to generate a string that contains special characters without needing to escape them manually.

Example:

// Unicode values for: Sling Academy and 'single quotes' and "double quotes" and backslash \\
const specialCharsCode = [
  83, 108, 105, 110, 103, 32, 65, 99, 97, 100, 101, 109, 121, 32, 97, 110, 100,
  32, 39, 115, 105, 110, 103, 108, 101, 32, 113, 117, 111, 116, 101, 115, 39,
  32, 97, 110, 100, 32, 34, 100, 111, 117, 98, 108, 101, 32, 113, 117, 111, 116,
  101, 115, 34, 32, 97, 110, 100, 32, 98, 97, 99, 107, 115, 108, 97, 115, 104,
  32, 92,
];
const stringWithSpecialChars = String.fromCharCode(...specialCharsCode);
console.log(stringWithSpecialChars);

Output:

Sling Academy and 'single quotes' and "double quotes" and backslash \

In practice, you will rarely see this method because it is more complicated than necessary. However, it is still helpful to know that it exists.