Helps you distinguish between encodeURI and encodeURIComponent usage scenarios

### Background

Recently, while working on the preview feature in my company, I came across a scenario of encoding the request parameters. So the question arises.

• Why is it necessary to encode a link or parameter?
• When do I need to encode? What is the difference between * encodeURI and encodeURIComponent?

Let’s take a look at it together~

### Why do you need to encode

Http protocol parameter transmission is “key=value” such key-value pairs, if you want to pass more than one parameter you need to use the “&” symbol to split the key-value pairs. For example, “?name1=value1&name2=value2”, so that when the server receives such a string, it will use “&” to split each parameter, and then use “=” to split the parameter value.

URLs are encoded using the ASCII character set, according to the RFC3986 “% encoding” specification: “&” is encoded as “26” and “=” is encoded as “3D”.

If the parameter value contains a special character like “=” or “&”, it will be ambiguous because URL encoding simply prefixes each byte of the special character with %, so URL encoding of the parameter is required.

If the parameter to be transmitted may contain special characters like “(! $&’()*+,;=)”, the encoding is required. Here is a look at the two encoding methods described in the title. We notice that both methods contain a URI, so what is the URI? A Uniform Resource Identifier (URI) is a string that identifies the name of an Internet resource. Every resource available on the Web - HTML documents, images, video clips, programs, etc. - is located by a Uniform Resource Identifier (URI for short). ### encodeURI Used to encode a complete URI, without encoding ASCII letters and numbers and punctuation in the URL. • ! #$&’()*+,/:;=? @-. _~0-9a-zA-Z will not be encoded

Usage scenario :. Use this method for encoding when you need to get an available URL address.

Example.

 1 2  encodeURI('http://xuedingmiao.com/My first/'); // http://xuedingmiao.com/My%20first/ 

### encodeURIComponent

is a method for encoding components of a Uniform Resource Identifier (URI), literally URIComponent is a URL component, a component, so this method encodes the component rather than the whole.

The encodeURIComponent assumes that its arguments are part of a URI (such as a protocol, hostname, path, or query string) and that the symbols that are not encoded in the encodeURI “; / ? : @ & = + $, #”, encodeURIComponent encodes them all. • !’ ()*-. _~0-9a-zA-Z will not be encoded Usage scenario. Use encodeURIComponent when the parameters of a URL need to be encoded. Example.  1 2  encodeURIComponent('http://xuedingmiao.com/?a=1&b=2'); // "http%3A%2F%2Fxuedingmiao.com%2F%3Fa%3D1%26b%3D2"  ### Summary of differences encoding method applicable scenarios secure characters encodeURI encodes the full URI 82 of them: ! #$&’()*+,/:;=? @-. _~0-9a-zA-Z
encodeURIComponent encodes URI components 71:!’ ()*-. _~0-9a-zA-Z
• You can see that encodeURIComponent encodes a larger range of characters than encodeURI