Detailed explanation of the differences between string encoding functions escape(), encodeURI(), and encodeURIComponent() in js_javascript skills

There are three functions in JavaScript that can encode strings, namely: escape, encodeURI, encodeURIComponent, and the corresponding three decoding functions:

unescape,decodeURI,decodeURIComponent.

The following is a brief introduction to their differences

1 escape() function

Definition and usage

The

escape() function encodes a string so that it can be read on all computers.

Grammar

escape(string)

Parameter Description

string required. The string to be escaped or encoded.

Return value

A copy of the encoded string. Some of these characters are replaced with hexadecimal escape sequences.

Description

This method does not encode ASCII letters and numbers, nor does it encode the following ASCII punctuation characters: -_ . *

All other characters will be replaced by escape sequences.

2 encodeURI() function

Definition and usage

The encodeURI() function encodes a string as a URI.

Grammar

encodeURI(URIstring)

Parameter Description

URIstring required. A string containing the URI or other text to be encoded.

Return value

A copy of the URIstring, with some characters replaced by hexadecimal escape sequences.

Description

This method does not encode ASCII letters and numbers, nor does it encode these ASCII punctuation characters: - _ . ! ~ * ' ( ) .

The purpose of this method is to completely encode the URI, so the encodeURI() function will not escape the following ASCII punctuation characters that have special meanings in the URI: ;/?:@&=+$ ,#

3 encodeURIComponent() function

Definition and usage

The encodeURIComponent() function encodes a string as a URI component.

Grammar

encodeURIComponent(URIstring)

Parameter Description

URIstring required. A string containing URI components or other text to be encoded.

Return value

A copy of the URIstring, with some characters replaced by hexadecimal escape sequences.

Description

This method does not encode ASCII letters and numbers, nor does it encode these ASCII punctuation characters: - _ . ! ~ * ' ( ) .

Other characters (such as :;/?:@&=+$,# the punctuation marks used to separate URI components) are replaced by one or more hexadecimal escape sequences.

Tips and Notes

Tip: Please note that the encodeURIComponent() function differs from the encodeURI() function in that the former assumes that its arguments are part of a URI (such as a protocol, hostname, path, or query string). The encodeURIComponent() function therefore escapes the punctuation characters that separate parts of the URI.

4 Summary:

Through the analysis of the three functions, we can know that: escape(), in addition to ASCII letters, numbers and specific symbols, escapes all the strings passed in. Therefore, if you want to encode the URL, it is best to Don't use this method. And encodeURI() is used to encode the entire URI, because the legal characters in the URI will not be encoded and converted. The encodeURIComponent method should be the most commonly used when encoding a single URIComponent (referring to request parameters). It can escape Chinese and special characters in the parameters without affecting the entire URL.

5 Example:

1 escape()

<script type="text/javascript">
document.write(escape("http://www.w3school.com.cn/") + "<br />")
document.write(escape("&#63;!=()#%&"))
</script>输出：
http%3A//www.w3school.com.cn
%3F%21%3D%28%29%23%25%26

2 encodeURI()

<script type="text/javascript">
document.write(encodeURI("http://www.w3school.com.cn/")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/"))
document.write(encodeURI(",/&#63;:@&=+$#"))
</script>输出：
http://www.w3school.com.cn/
http://www.w3school.com.cn/My%20first/
,/&#63;:@&=+$#

Encodes the entire URL, while URL-specific identifiers are not transcoded.

3 encodeURIComponent()

Example 1:

<script type="text/javascript">
document.write(encodeURIComponent("http://www.w3school.com.cn/"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/&#63;:@&=+$#"))
</script输出：
http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

Example 2:

<script language="javascript">document.write('
<a href="http://passport.baidu.com/&#63;logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+'">退出</a>');</script>

Encode the parameters in the URL, because the parameters are also a URL. If not encoded, it will affect the jump of the entire URL.