Start learning free

LESSON 59 OF 348 · STRINGS I

Escaping Characters in TypeScript: Backslash and \n

Lesson Read the full explanation

In TypeScript, some characters serve different functions and so cannot be displayed or printed like other characters. These characters are referred to as special characters.

For example, double quotes (") and single quotes (') are considered special characters by TypeScript. Their job is to let TypeScript know when a string declaration starts / ends.

That's why in the previous lesson we ran into problems when trying to have a single quote inside a string that is surrounded by single quotes.

console.log('My name's Andy');

We've found an elegant solution to this and that was by changing the type of quotes we surround our string in:

console.log("My name's Andy");

console.log('Double quotes "inside double" quotes');

But what if we wanted to print a string that contains both single and double quotes such as After "Coding 101" we'll solve some problems ?

Let's try to surround this text by single quotes:

console.log('After "Coding 101" we'll solve some problems');

That doesn't work. It produces a SyntaxError.

Maybe surrounding the text by double quotes will work:

console.log("After "Coding 101" we'll solve some problems");

Not really. It also produces a SyntaxError.

Character escaping comes to our rescue!

Escaping characters:

There is a way to print special characters like these in TypeScript, and that is by using the backslash character (\).

When we put \ before a special character, we tell TypeScript:

"Hey, I know this is a special character, but I don't want to use it like that here. I just want to print it like I print any other character."

For example, when putting a \ before a quote, TypeScript no longer interprets that as being the end of the string:

console.log('My name\'s Andy');

console.log("Double quotes \"inside double\" quotes");

console.log("After \"Coding 101\" we'll solve some problems");

console.log('After "Coding 101" we\'ll solve some problems');

The output of this code is:

My name's Andy
Double quotes "inside double" quotes
After "Coding 101" we'll solve some problems
After "Coding 101" we'll solve some problems

Escaping backslash:

Sometimes we might want to print strings that contain character \, such as a file path in your PC:

console.log('C:\Users\Andy\Games');

This code looks perfectly fine at first sight, but if you run it, it would produce this output:

C:UsersAndyGames

That's because in TypeScript, \ is also a special character and its main purpose is escaping other characters, not being printed.

So when the interpreter sees \U for example, it supposes that you are trying to escape character U, which is not a special character thus it's already "escaped".

Like any special character, \ can also be escaped by putting another \ in front of it (\\):

console.log('C:\\Users\\Andy\\Games');

The output of this code is:

C:\Users\Andy\Games

New line character:

Similarly, the escape sequence can be used to make an otherwise printable character serve a special function.

For example, the letter n can be printed normally, but adding a backslash before it (\n) will indicate the start of a new line:

console.log("Hello world!\nWhat a good day for coding!\n");
console.log("Let\'s have a blast!");

The output of this code is:

Hello world!
What a good day for coding!

Let's have a blast!

Notice the empty line after What a good day for coding! ?

That's one new line from the \n plus the new line that console.log() prints no matter what the message is.

Assignment
Follow the Coding Tutorial and let's escape some characters!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 3
    Ctrl + Enter to check

    TYPESCRIPT · STRINGS I

    Escaping Characters in TypeScript, explained

    What escaping is

    Some characters have a job in the language's syntax. A quote tells the compiler where a string starts and ends. A backslash \ tells it that the next character is special. Inside a string, you often need a character without its job, or a character that has no keyboard key of its own, such as a new line. Escaping does this: you write a backslash followed by a character, and the pair, called an escape sequence, stands for one character in the string.

    Quotes inside a string

    Switching the outer quotes solves the problem when the text has only one kind of quote. When the text has both, as in After "Coding 101" we'll solve some problems, neither outer quote works. A backslash before a quote makes it plain text:

    console.log('My name\'s Andy');
console.log("Double quotes \"inside double\" quotes");
console.log("After \"Coding 101\" we'll solve some problems");
console.log('After "Coding 101" we\'ll solve some problems');

    My name's Andy
Double quotes "inside double" quotes
After "Coding 101" we'll solve some problems
After "Coding 101" we'll solve some problems

    You only need to escape the quote kind that matches the outer quotes. In the last line the double quotes are left alone, because the string is wrapped in single quotes.

    Printing a backslash

    Since a backslash starts an escape sequence, a lone backslash in a string does not stay in the string. This line looks harmless:

    console.log('C:\Users\Andy\Games');

    C:UsersAndyGames

    In each pair, the backslash is dropped and the letter after it stays. To keep a backslash, escape it with another one:

    console.log('C:\\Users\\Andy\\Games');

    C:\Users\Andy\Games

    Here \\ is one backslash character, so the string holds 3 backslashes even though the code shows 6.

    The new line and other sequences

    Escaping also works in the other direction: a backslash before an ordinary letter can give it a special meaning. The most common case is \n, a new line:

    console.log("Hello world!\nWhat a good day for coding!\n");
console.log("Let's have a blast!");

    Hello world!
What a good day for coding!

Let's have a blast!

    The empty line is the second new line: one from the \n at the end of the first string, and one that console.log adds after every message. The string is still one value; the new line is a single character inside it.

    A few other sequences are worth knowing: \t is a tab, \\ is a backslash, \' and \" are the two quote characters, and \u0041 is a character given by its Unicode code, which here is A.

    The exercise

    The lesson has three steps, each printing one message with console.log.

    1. Print I'll study "Coding 101" on AlgoCademy. Wrap the text in single quotes and escape the apostrophe in I'll with \'. The double quotes need no escape inside single quotes.
    2. Print two lines with a single console.log. Put \n between I will learn this and No matter what.
    3. Print C:\Users\Andy\notion. Double every backslash. This step shows why it matters: an unescaped \n in \notion would be read as a new line, not as the two characters in the path.
    console.log('I\'ll study "Coding 101" on AlgoCademy');
console.log("I will learn this\nNo matter what");
console.log("C:\\Users\\Andy\\notion");

    The output is:

    I'll study "Coding 101" on AlgoCademy
I will learn this
No matter what
C:\Users\Andy\notion

    Gotchas

    • The backslash is part of the code, not of the string. The string "a\"b" has three characters: a, " and b.
    • The escaped backslash is easy to forget in paths. Unknown sequences like \U silently lose the backslash, so you get no error, only wrong output. A sequence like \n or \t in a path changes the output more visibly.
    • Escaping a quote that doesn't need it is harmless. "it\'s" and "it's" are the same string. Prefer the simpler one.
    • Escapes work inside quotes. A backslash outside a string is not an escape sequence, and the compiler reports it as an error.

    Key takeaways

    • A backslash plus a character is an escape sequence that stands for one character.
    • \' and \" put a quote in a string without ending it.
    • \\ is how you write a real backslash.
    • \n is a new line and \t is a tab.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free