Analysis and Comparison of escape (), encodeURI () and encodeURIComponent () in Javascript

Escape (), encodeURI () and encodeURIComponent () are three common methods used to encode strings in Javascript, but their similarities and differences have plagued many Javascript beginners, today, I will analyze and compare these three methods in detail.

Escape () method

In the MSDN JScript Reference:

The escape method returns a string value (in Unicode format) that contains the contents of [the argument]. all spaces, punctuation, accented characters, and any other non-ASCII characters are replaced with % xx encoding, where xx is equivalent to the hexadecimal number representing the character. for example, a space is returned as "% 20."

Simple translation: The escape method returns a string type value that contains the content of input parameters in Unicode format. The Escape method replaces all spaces, punctuation marks, accent characters, and any other non-ASCII characters in the input parameter with the % xx encoding format, the hexadecimal representation of xx and its characters is the same. For example, if the hexadecimal representation of the space character is 0 × 20, then xx should be 20, that is, escape ('') returns" % 20 ".

The Mozilla Developer Core Javascript Guide says:

The escape and unescape functions let you encode and decode strings. the escape function returns the hexadecimal encoding of an argument in the ISO Latin character set. the unescape function returns the ASCII string for the specified hexadecimal encoding value.

The escape and unescape methods help you encode and decode strings. The escape method returns hexadecimal encoding for the character set of ISO Latin. Correspondingly, the unescape method can convert hexadecimal encoding parameters into their ASCII format.

EncodeURI () method

In the MSDN JScript Reference:

The encodeURI method returns an encoded URI. if you pass the result to decodeURI, the original string is returned. the encodeURI method does not encode the following characters: ":", "/", ";", and "? ". Use encodeURIComponent to encode these characters.

The encodeURI method returns an encoded URI. If the encoding result of the encodeURI method is passed to the decodeURI method as a parameter, the original unencoded string is obtained. Note that the encodeURI method does not encode the following characters: ","/","; ", and"? ". To encode these characters, use the encodeURIComponent method.

The Mozilla Developer Core Javascript Guide says:

Encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.

By replacing each character set with one, two, or three (why one, two, or three, the escape sequence of the character is encoded by UTF-8 to encode a URI. For example ~! @ # $ % ^ & * () {} [] = :/,;? + '\ Will be replaced ~! @ # $ % 25% 5E & * () % 7B % 7D % 5B % 5D = :/,;? + '% 22% 5C

EncodeURIComponent () method

In the MSDN JScript Reference:

The encodeURIComponent method returns an encoded URI. if you pass the result to decodeURIComponent, the original string is returned. because the encodeURIComponent method encodes all characters, be careful if the string represents a path such as/folder1/folder2/default.html. the slash characters will be encoded and will not be valid if sent as a request to a web server. use the encodeURI method if the string contains more than a single URI component.

The encodeURIComponent method returns an encoded URI. If you pass the encoding result of the encodeURIComponent method to the encodeURIComponent method as a parameter, you can obtain the original unencoded string. Because the encodeURIComponent method encodes all characters, you must be careful when the string to be encoded is used to represent a path (such as/dir1/dir2/index.htm. The '/' symbol is no longer a valid path identifier after it is encoded, so it cannot be correctly recognized by the web server. When a string contains a separate URI component? ), Use this method.

The Mozilla Developer Core Javascript Guide says:

Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.

By replacing each character set with one, two, or three (why one, two, or three, to encode a URIComponent, we use UTF-8 encoding to represent the escape sequence of the character.

What is the difference? When to use?

 
From the above introduction, we can see that the MS documentation is obviously more detailed and easier to understand than Mozilla, but they all express a meaning. However, what are the similarities and differences between escape (), encodeURI (), and encodeURIComponent ()? Are they applicable to specific situations?

The escape method does not encode character +. We know that in the form field submitted by the user, if there is a space, it will be converted to a + character, and the server will think that the + number represents a space during parsing. Due to this defect, the escape method cannot correctly process all non-ASCII characters. Instead, you should try to avoid using the escape method. Instead, you 'd better choose the encodeURIComponent () method.
Unencoded characters of escape (): @ */+

Compared with the escape method, the encodeURI method is more professional. When you need to encode an entire URI, you can use this method, because the valid characters in the URI are not encoded and converted. It should be noted that the character 'is also a valid character in the URI, so it will not be converted by encoding.
EncodeURI () unencoded characters :~! @ # $ & * () = :/,;? +'

The encodeURIComponent method is the most commonly used method for encoding a single URIComponent (request parameter. It should be noted that the character 'is also a valid character in the URI, so it will not be converted by encoding.
EncodeURIComponent () unencoded characters :~! *()'