Introduction and Lesson Goal

Hello, eager learner! Today, we unlock the power of Escape Characters and Special Characters in JavaScript. Our adventure begins with an exploration of escape characters. We then move on to their uses and learn about special characters. Finally, we'll unravel the trick to escaping special characters in strings. Ready? Let's dive right in!

Understanding Escape Characters

The escape character in JavaScript is the backslash (\). Acting as a turning point, it gives a different interpretation to the characters that follow it. Here's a classic scenario: inserting special characters, such as quotations, within a string. We cannot use double quotes inside the string as is, as JavaScript won't be able to parse it this way, but an escape character comes to the rescue:

let quote = "And then she said, \"Hello, World!\"";
console.log(quote);  // Outputs: And then she said, "Hello, World!"

In this instance, the escape character (\) inserts double quotes into the string. Without it, the JavaScript compiler would throw an error. Other frequently used escape sequences include \t (tab), \n (new line), and \\ (backslash).

console.log("This is an escape character lesson:\n\t- Backslash: \\\t- New line: \\n\t- Tab: \\t"); // An example of using escape sequences
/*
Prints:
This is an escape character lesson:
    - Backslash: \	- New line: \n	- Tab: \t
*/

In this example, "\n" inserts a new line, and "\t" inserts a tab, resulting in a neatly organized output. It might look scary, but feel free to ask me for help, I'm happy to clarify things if they are not clear!

Escaping Special Characters

Sometimes, we need to include special characters, like the escape character itself, in a string. To do this, we precede these special characters with a backslash (\), effectively escaping them.

let phrase = "She said, \"Hey, it\'s a \\ \".";
console.log(phrase);  // Outputs: She said, "Hey, it's a \ ".

In this example, we escape a double quote (\"), a single quote (\'), and a backslash (\\) itself in a string.

Applying Escape Characters with Template Strings

Escape and special characters work with template strings, too! For instance, to use a back-tick within a template string, you need to escape it just like other characters:

console.log(`This is a back-tick: \` .`);  // Outputs: This is a back-tick: ` .

New line and tab escape characters can also be used, although template strings also directly allow multi-line strings!

const testMessage = "Test message";

console.log(`This supports\n\t- New lines\n\t- Tabs`);  // Supports new lines and tabs
// Prints:
// This supports
//	- New lines
//	- Tabs

console.log(`This supports
\t- New lines
\t- Tabs
\t- And expressions, as before: ${testMessage}`); // Also supports multi-line strings
// Prints:
//This supports
//	- New lines
//	- Tabs
//	- And expressions, as before: Test message

So, escape characters perfectly blend with template strings to form complex string expressions.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal