Escape Sequence in JavaScript - A Few Unused Ones as Well

Simple escape characters that help you achieve small formatting tasks

Character literals help you format your strings in JavaScript.

We will look at simple escape characters that help you achieve small formatting tasks, such as adding a new line in JavaScript to a complete guide on all the available escape characters. Apart from the new line character, we will also look at various other escape characters in JavaScript and how they can help you format your strings in various ways. Till the end, I promise that you will know a lot more escape characters than just the new line symbol in JavaScript.

Since we would be looking at some string character literals, let's declare two variables holding string values to understand how the character literals are working.

/* Declare variables holding some strings */
let intro = "My name is John Doe";
let fathersName = "My father's name is Mark Doe";

Escaping double quotes in JavaScript

Let's assume that I want to quote the name of John Doe into double-quotes for some reason. Before we do that, let me add prettier ignore so that prettier does not auto-format my code. Let's try adding double quotes now. You see, the moment I add double quotes to John Doe, my IDE starts shouting at me because this is a syntax error. If you look closely, you will understand why so. Now the first double quote starts before My and ends after is. The second pair of double quotes for JavaScript start after Doe and ends there as well. Now John Doe becomes an expression that is not recognized by JavaScript and hence this error. This is where we can use our first character literal. In Javascript, character literals use an escape character '\', which is a backslash like so followed by the character you want to be treated as a string value by JavaScript, so a double quote in our case. Let's end this with the second double quote here as well. Let me print the result to the console to see what we get. We have indeed added double quotes the way we wanted to.

/* Declare variables holding some strings */
let intro = 'My name is "John Doe"';
console.log(intro);

// Output -> My name is "John Doe"

Escaping single quotes in JavaScript

Let's have a look at another one now. In our second string here, I will convert it to single quotes for the sake of our example, and it's a perfectly valid syntax to have strings in single quotes. JavaScript makes no differentiation between them. The moment I do that, you see, I start getting a syntax error. Let's have a closer look to see what is happening. According to JavaScript, now my first string value starts with My and ending before s over here, and then another one starts after the word Doe which never ends. Javascript cannot recognize this entire expression here, and hence my IDE throws a syntax error. In the same way, we did it with double-quotes. We can add an escape character before the single quote we have before S. This is our second character literal where we can escape single quotes by adding a backslash or an escape character. I will output the value to the console to see if JavaScript understands it correctly now. Certainly, it does work.

// prettier-ignore
let fathersName = 'My father\'s name is Mark Doe';
console.log(fathersName);

// Output -> My father's name is Mark Doe

Adding a new line to strings in JavaScript

Okay, let's have a look at another one here. For this, let me copy our intro variable, create another variable, and name it intro2 and remove these double-quotes. Cool! Now, let us assume that I want to add a backslash at the end of John Doe's name for some reason. Let's add a backslash and print it to the console to see what we get.

let intro2 = "My name is John Doe  ";
console.log(intro2);

We get here the string without a backslash, and JavaScript ignored the one we had added. This is because an escape character on its own is of no value and is ignored by JavaScript. JavaScript doesn't understand our intent of printing a backslash. So we would need to add another backslash after the first one. Now you see we get the desired result.

let intro2 = "My name is John Doe \\ ";
console.log(intro2);

Concatenation and new line character in JavaScript

Let's assume that we wanted to print these two sentences together but in two different lines. I will create another variable so that you have the previous one available for your records. I will try to concatenate them and see what we get. You see, we did join the two sentences, but we don't get them in two separate lines. For that, we can use a new line character literal. Let's add the escape character followed by \n. This creates a new line. A syntax of declaring string in JavaScript known as the Template Literals makes creating multiline strings even easier.

let intro3 = "My name is John Doe \n";
console.log(intro3 + fathersName);

// \n -  for adding a new line

Unused character literals in JavaScript

There are a few more character literals which are available in JavaScript. Let me add them here in the comments. It is worth noting that I am not covering these in this tutorial because they are not supported by a few browsers and not relevant for the web. These were created for electronic typewriters, fax machines, etc. But you can refer to them and see what they do; it's always good to know what all you can do with JavaScript.

/*
 * \b   Backspace
 * \f   Form Feed
 * \n   New Line
 * \r   Carriage Return
 * \t   Horizontal Tabulator
 * \v   Vertical Tabulator
 * */

I hope this article was helpful.

What Can You Do Next 🙏😊

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all edutainment stuff for ssoftware developers.