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.
P.S:
I will be covering all the good and the bad parts of JavaScript in the JavaScript Masterclass series. Please follow Cloudaffle and enable notifications to get alerts to the new videos that I keep posting. If you have any questions or
suggestions, please feel free to
Top comments (7)
I wouldn't call these "character literals", because characters are a different data type from strings in many languages (character is to string as integer is to array of integers). So a character literal would be a syntactical way of expressing a character, such as C's single quote marks or Elixir's
?notation.I appreciate your point of view. But if you look at resources such as W3C and even various writings about JavaScript in books such as Professional JavaScript for Web Developers they do mention them as character literals and many times as string literals as well. I do understand where you are coming from and the logic behind what you are saying, but this literal syntax also always you to use unicode characters and print them to strings. It's probably that reason they refer to this as Character Literals!
Can't share the image from the book on this comment but here is a post from stack overflow talking about the same
stackoverflow.com/q/28858138/8456836
That's interesting, but I think that's referring to a different concept again. For example,
"A"uses a character literal, but"\x41"doesn't (even though they are the same string). So in the case of escaping newlines,"\n"doesn't use a character literal, whereasdoes.
Hmm I would agree to that looking at the logic! How about chnaging the title to escape characters and having a genral approach towads it rather than refering to a specific escape charater that generatds charater literals 👍
Yes, personally I'd call them "escape sequences" (with
\being the "escape character").Anyway, nice article! 😁
Yes agreed 💯
Changed the title to Escape Sequence 😀😀 ... Thank you it was a good discussion 👍🙏