Do i need to escape in javascript string?

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Warning: Although escape() is not strictly deprecated (as in "removed from the Web standards"), it is defined in Annex B of the ECMA-262 standard, whose introduction states:

… All of the language features and behaviors specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification. … … Programmers should not use or assume the existence of these features and behaviors when writing new ECMAScript code. …

The escape() function computes a new string in which certain characters have been replaced by a hexadecimal escape sequence.

Note: This function was used mostly for URL queries (the part of a URL following ?)—not for escaping ordinary String literals, which use the format \xHH. (HH are two hexadecimal digits, and the form \xHH\xHH is used for higher-plane Unicode characters.)

Escaped characters in String literals can be expanded by replacing the \x with %, then using the decodeURIComponent() function.

Syntax

Parameters

str

A string to be encoded.

Return value

A new string in which certain characters have been escaped.

Description

The escape function is a property of the global object. Special characters are encoded with the exception of: @*_+-./

The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx. For characters with a greater code unit, the four-digit format %uxxxx is used.

Examples

Using escape

escape('abc123');     // "abc123"
escape('äöü');        // "%E4%F6%FC"
escape('ć');          // "%u0107"

// special characters
escape('@*_+-./');    // "@*_+-./"

Specifications

Specification
ECMAScript Language Specification
# sec-escape-string

Browser compatibility

BCD tables only load in the browser

See also

Introduction

A string is a sequence of one or more characters that may consist of letters, numbers, or symbols. Strings in JavaScript are primitive data types and immutable, which means they are unchanging.

As strings are the way we display and work with text, and text is our main way of communicating and understanding through computers, strings are one of the most fundamental concepts of programming to be familiar with.

In this article, we’re going to learn how to create and view the output of strings, how to concatenate strings, how to store strings in variables, and the rules of using quotes, apostrophes, and newlines within strings in JavaScript.

Creating and Viewing the Output of Strings

In JavaScript, there are three ways to write a string — they can be written inside single quotes (' '), double quotes (" "), or backticks (` `). The type of quote used must match on both sides, however it is possible that all three styles can be used throughout the same script.

Strings using double quotes and single quotes are effectively the same. As there is no convention or official preference for single- or double-quoted strings, all that matters is keeping consistent within project program files.

'This string uses single quotes.';
"This string uses double quotes.";

The third and newest way to create a string is called a template literal. Template literals use the backtick (also known as a grave accent) and work the same way as regular strings with a few additional bonuses, which we will cover in this article.

`This string uses backticks.`;

The easiest way to view the output of a string is to print it to the console, with console.log():

console.log("This is a string in the console.");

Output

This is a string in the console.

Another simple way to output a value is to send an alert popup to the browser with alert():

alert("This is a string in an alert.");

Running the line above will produce the following output in the browser’s user interface:

Do i need to escape in javascript string?

alert() is a less common method of testing and viewing output, as it can quickly become tedious to close the alerts.

Storing a String in a Variable

Variables in JavaScript are named containers that store a value, using the keywords var, const or let. We can assign the value of a string to a named variable.

const newString = "This is a string assigned to a variable.";

Now that the newString variable contains our string, we can reference it and print it to the console.

console.log(newString);

This will output the string value.

Output

This is a string assigned to a variable.

By using variables to stand in for strings, we do not have to retype a string each time we want to use it, making it simpler for us to work with and manipulate strings within our programs.

String Concatenation

Concatenation means joining two or more strings together to create a new string. In order to concatenate, we use the concatenation operator, represented by a + symbol. The + symbol is also the addition operator when used with arithmetic operations.

Let’s create a simple instance of concatenation, between "Sea" and "horse".

"Sea" + "horse";

Output

Seahorse

Concatenation joins the strings end to end, combining them and outputting a brand new string value. If we would like to have a space between the words Sea and horse, we would need to include a whitespace character in one of the strings:

"Sea " + "horse";

Output

Sea horse

We join strings and variables containing string values with concatenation.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = "My favorite poem is " + poem + " by " + author + ".";

Output

My favorite poem is The Wide Ocean by Pablo Neruda.

When we combine two or more strings through concatenation we are creating a new string that we can use throughout our program.

Variables in Strings with Template Literals

One special feature of the template literal feature is the ability to include expressions and variables within a string. Instead of having to use concatenation, we can use the ${} syntax to insert a variable.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;

Output

My favorite poem is The Wide Ocean by Pablo Neruda.

As we can see, including expressions in template literals is another way to accomplish the same result. In this case, using template literals might be easier to write and more convenient.

String Literals and String Values

You might notice that the strings we write in the source code are encased in quotes or backticks, but the actual printed output does not include any quotations.

"Beyond the Sea"; 

Output

Beyond the Sea

There is a distinction when referring to each of these. A string literal is the string as it is written in the source code, including quotations. A string value is what we see in the output, and does not include quotations.

In the above example, "Beyond the Sea" is a string literal, and Beyond the Sea is a string value.

Escaping Quotes and Apostrophes in Strings

Due to the fact that quotation marks are used to denote strings, special considerations must be made when using apostrophes and quotes in strings. Attempting to use an apostrophe in the middle of a single-quoted string, for example, will end the string, and JavaScript will attempt to parse the rest of the intended string as code.

We can see this by attempting to use an apostrophe in the I'm contraction below:

const brokenString = 'I'm a broken string';

console.log(brokenString);

Output

unknown
: Unexpected token (1:24)

The same would apply to attempting to use quotes in a double-quoted string.

In order to avoid an error being thrown in these situations, we have a few options that we can use:

  • Opposite string syntax
  • Escape characters
  • Template literals

We will explore these options below.

Using the Alternate String Syntax

An easy way to get around isolated cases of potentially broken strings is to use the opposite string syntax of the one you’re currently using.

For example, apostrophes in strings built with ".

"We're safely using an apostrophe in double quotes."

Quotation marks in strings built with '.

'Then he said, "Hello, World!"';

In the way we combine single and double quotes, we can control the display of quotation marks and apostrophes within our strings. However, when we are working to use consistent syntax within project programming files, this can be difficult to maintain throughout a codebase.

Using the Escape Character (\)

We can use the backslash (\) escape character to prevent JavaScript from interpreting a quote as the end of the string.

The syntax of \' will always be a single quote, and the syntax of \" will always be a double quote, without any fear of breaking the string.

Using this method, we can use apostrophes in strings built with ".

'We\'re safely using an apostrophe in single quotes.'

We can also use quotation marks in strings built with ".

"Then he said, \"Hello, World!\"";

This method is a bit messier looking, but you may need to use both an apostrophe and a quotation mark within the same string, which will make escaping necessary.

Using Template Literals

Template literals are defined with backticks, and therefore both quotes and apostrophes can be used safely without any sort of extra escaping or consideration.

`We're safely using apostrophes and "quotes" in a template literal.`;

In addition to preventing the need for character escaping and allowing embedded expressions, template literals provide multi-line support as well, which we will discuss in the next section.

With alternating string syntax, using escape characters, and using template literals, there are several ways to safely create a string.

Long Strings and Newlines

There are times you may want to insert a newline character, or carriage return in your string. The \n or \r escape characters can be used to insert a newline in the output of code.

const threeLines = "This is a string\nthat spans across\nthree lines.";

Output

This is a string that spans across three lines.

This technically works to get our output on multiple lines. However, writing a very long string on a single line will quickly become very hard to read and work with. We can use the concatenation operator to show the string on multiple lines.

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

Instead of concatenating multiple strings, we can use the \ escape character to escape the newline.

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

Note: This method is not preferred, as it may cause issues with some browsers and minifiers.

In order to make code more readable, we can instead use template literal strings. These eliminate the need for concatenation or escaping on long strings containing newlines. The string as well as newlines will be preserved.

const threeLines = `This is a string
that spans across
three lines.`;

Output

This is a string that spans across three lines.

It’s important to be aware of all the ways of creating newlines and strings that span across multiple lines, as different code bases may be using various standards.

Conclusion

In this article, we went over the basics of working with strings in JavaScript, from creating and displaying string literals using single and double quotes, creating template literals, concatenation, escaping, and assigning string values to variables.

Do you need to escape in JavaScript?

In the HTML we use double-quotes and in the JavaScript single-quotes, so any quotes within the JavaScript code will need to be escaped so that they don't conflict with either the HTML or JavaScript quotes.

Do you need to escape in string?

Raw string literals For example, you want to specify the path C:\windows in your search. This path is a string value and normally you need to escape the backslash character ( \ ) to have the search ignore the backslash in the string. As with all strings, it must be enclosed in double quotation marks.

How do you escape a string in JavaScript?

Using the Escape Character ( \ ) We can use the backslash ( \ ) escape character to prevent JavaScript from interpreting a quote as the end of the string. The syntax of \' will always be a single quote, and the syntax of \" will always be a double quote, without any fear of breaking the string.

What characters do you need to escape in JavaScript?

Single character escape sequences.
\b : backspace (U+0008 BACKSPACE).
\f : form feed (U+000C FORM FEED).
\n : line feed (U+000A LINE FEED).
\r : carriage return (U+000D CARRIAGE RETURN).
\t : horizontal tab (U+0009 CHARACTER TABULATION).
\v : vertical tab (U+000B LINE TABULATION).