Several ways of encoding and decoding in JavaScript

There are several functions that can encode strings in JavaScript, namely: escape, encodeURI, and encodeURIComponent.

1. escape

element	description
definition	The escape() function can encode a string so that it can be read on all computers
grammar	escape(string)
Parameter Description	The escape() function can encode a string so that it can be read on all computers
return value	A copy of the encoded string with some characters replaced by hexadecimal escape sequences
Description	This method does not encode ASCII letters and numbers, nor does it encode the following ASCII punctuation marks:-_.! ~ * '(). All other characters will be replaced by escape sequences.
decoding	unescape()
prompt	ECMAScript v3 opposes the use of this method, the application uses decodeURI() and decodeURIComponent() instead

const a1 = 'Visit W3School!';
const b1 = '?!=()#%&'
console.log(escape(a1)); // Visit%20W3School%21
console.log(escape(b1)); // %3F%21%3D%28%29%23%25%26

const a2 = 'Visit%20W3School%21';
const b2 = '3F%21%3D%28%29%23%25%26';
console.log(unescape(a2)); // Visit W3School!
console.log(unescape(b2)); // ?!=()#%&

2. encodeURI

element	description
definition	The encodeURI() function can encode a string as a URI
grammar	encodeURI(URIstring)
Parameter Description	URIstring is required. A string containing URI or other text to be encoded.
return value	A copy of URIstring, some of which will be replaced by hexadecimal escape sequences
Description	This method does not encode ASCII letters and numbers, nor does it encode these ASCII punctuation marks:-_.! ~ * '(). The purpose of this method is to fully encode the URI, so the encodeURI() function will not escape the following ASCII punctuation that has a special meaning in the URI:; /?: @ & = + $, #.
decoding	decodes ()
prompt	If the URI component contains separators, such as? and #, you should use the encodeURIComponent() method to encode each component separately

const a1 = 'http://www.w3school.com.cn/My first/';
const b1 = ',/?:@&=+$#'
console.log(encodeURI(a1)); // http://www.w3school.com.cn/My%20first/
console.log(encodeURI(b1)); // ,/?:@&=+$#

const a2 = 'http://www.w3school.com.cn/My%20first/';
const b2 = ',/?:@&=+$#';
console.log(decodeURI(a2)); // http://www.w3school.com.cn/My first/
console.log(decodeURI(b2)); // ,/?:@&=+$#

3. encodeURIComponent

element	description
definition	The encodeURIComponent() function can encode a string as a URI component
grammar	encodeURIComponent(URIstring)
Parameter Description	URIstring is required. A string containing URI components or other text to be encoded
return value	A copy of URIstring, some of which will be replaced by hexadecimal escape sequences
Description	This method does not encode ASCII letters and numbers, nor does it encode these ASCII punctuation marks:-_.! ~ * '(). Other characters (for example:; /?: @ & = + $, # These punctuation marks used to separate URI components) are replaced by one or more hexadecimal escape sequences.
decoding	decodeURICompoent()
prompt	Note: The difference between encodeURIComponent() function and encodeURI() function, the former assumes that its parameters are part of the URI (such as protocol, hostname, path or query string). Therefore, the encodeURIComponent() function will escape the punctuation that separates the parts of the URI.

const a1 = 'http://www.w3school.com.cn/My first/';
const b1 = ',/?:@&=+$#'
console.log(encodeURIComponent(a1)); // http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
console.log(encodeURIComponent(b1)); // ,%2C%2F%3F%3A%40%26%3D%2B%24%23


const a2 = 'http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F';
const b2 = '%2C%2F%3F%3A%40%26%3D%2B%24%23';
console.log(decodeURIComponent(a2)); // http://www.w3school.com.cn/My first/
console.log(decodeURIComponent(b2)); // ,/?:@&=+$#

Summary:
Through the analysis of the three functions, we know that: except for ASCII letters, numbers, and specific symbols, escape() encodes all incoming strings, so if you want to encode URLs, it’s best not to use them. This method. And encodeURI() is used to encode the entire URI, because legal characters in the URI will not be converted by encoding. The encodeURIComponent method should be the most commonly used when encoding a single URIComponent (referring to request parameters). It can escape the Chinese and special characters in the parameters without affecting the entire URL.