How to Escape Quotes in a String in JavaScript
Table of Contents
When working with strings in any programming language, you will sometimes need to use quote characters inside of a string.
To do this properly, you need to escape the quote characters so that the string is properly terminated.
If you don't, the string will get prematurely terminated and the rest of the string will be interpreted as code, producing unexpected results.
In this post, we'll learn all the different ways to escape quotes in JavaScript.
How to escape quotes by using backslashes
The easiest way to escape a quote in JavaScript is to use the backslash character \
before the quote character.
Let's look at an escaped single quote:
JAVASCRIPTconst escapedSingleQuote = 'I\'m a string';
console.log(escapedSingleQuote);
BASHI'm a string
When you put a backslash \
before a quote character, it tells the JavaScript interpreter to ignore the quote character and treat it as a regular character.
This works the same way when working with double quotes:
JAVASCRIPTconst escapedDoubleQuote = "She didn't want to call him \"Mr. Smith\"";
console.log(escapedDoubleQuote);
BASHShe didn't want to call him "Mr. Smith"
Notice how since there were two quote characters in the string, we had to escape both of them.
Escaping quotes by changing the outer quote character
Another way to escape quotes is to change the outer quote character.
Simply use the opposite quote character to escape the quote character you want to use.
Here's an example of using single quotes to escape double quotes:
JAVASCRIPTconst escapedDoubleQuote = 'She did not want to call him "Mr. Smith"';
console.log(escapedDoubleQuote);
BASHShe did not want to call him "Mr. Smith"
Notice how no backslashes were used in this example because we used single quotes to escape the double quotes.
This also works in reverse:
JAVASCRIPTconst escapedSingleQuote = "She did not want to call him 'Mr. Smith'";
console.log(escapedSingleQuote);
BASHShe did not want to call him 'Mr. Smith'
Escaping quotes by using template literals
Template literals are a new feature in JavaScript that allow you to use strings with embedded expressions.
They are defined using backticks (`) instead of single or double quotes.
When using template literals, you can use single or double quotes without having to escape them:
JAVASCRIPTconst escapedSingleQuote = `She did not want to call him 'Mr. Smith'`;
const escapedDoubleQuote = `She did not want to call him "Mr. Smith"`;
console.log(escapedSingleQuote);
console.log(escapedDoubleQuote);
BASHShe did not want to call him 'Mr. Smith'
She did not want to call him "Mr. Smith"
As you can see, there are plenty of ways to escape quotes in JavaScript.
Conclusion
In this post, we learned how to escape quotes in JavaScript.
Your options include using backslashes, changing the outer quote character, or using template literals.
Thanks for reading!
- How to Serve Static Files with Nginx and Docker
- How to deploy a .NET app using Docker
- How to build a Discord bot using TypeScript
- How to deploy a Deno app using Docker
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Getting Started with Sass
- Getting Started with Handlebars.js
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Setting Up Stylus CSS Preprocessor
- How To Create a Modal Popup Box with CSS and JavaScript