What is the difference between escape, encodeuri and encodeuricomponent?

One 、 Reference resources

1. escape,encodeURI,encodeURIComponent What's the difference? ?
2. encodeURIComponent() MDN

Two 、 Function introduction

2.1 escape(string)

• Concept
  escape Is a pair of strings (string) Encoding , So you This string can be read on all computers .
• Return value
  Coded string Copy of . Some of these characters have been replaced with hexadecimal escape sequences .
• explain
  • This method doesn't work for ASCII Code letters and numbers ,
  • It's not about the following ASCII Punctuation is encoded ： - _ . ! ~ * ’ ( ) .
  • All other characters are replaced by escape sequences . (ASCII Some values of the code will also be replaced )
• Inverse function
  unescape

const v1 = escape('http://www.w3school.com.cn/')
console.log(v1) // http%3A//www.w3school.com.cn/
const v2 = escape('http://www.w3school.com.cn/My first/')
console.log(v2) // http%3A//www.w3school.com.cn/My%20first/
const v3 = escape(',/?:@&=+$#')
console.log(v3) // %2C/%3F%[email protected]%26%3D+%24%23
console.log(unescape('%2C/%3F%[email protected]%26%3D+%24%23')) // ,/?:@&=+$#

2.2 encodeURI(URIstring)

• Definition and Usage
  encodeURI() Function can take a string as URI Encoding .

• Return value
  URIstring Copy of , Some of these characters will be replaced by hexadecimal escape sequences .

• explain

  • The purpose of this method is to URI Complete coding , So for the following URI Having a special meaning in ASCII Punctuation ,encodeURI() Functions do not escape ：; / ? : @ & = + $ , #
  • This method doesn't work for ASCII Code letters and numbers , And it's not about these ASCII Punctuation is encoded ：- _ . ! ~ * ' ( ) .

• Inverse function
  decodeURI

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

2.3 encodeURIComponent(URIstring)

• Definition and Usage
  encodeURIComponent() Function can take a string as URI Components are encoded .

• Return value
  URIstring Copy of , Some of these characters will be replaced by hexadecimal escape sequences .

• explain

  • This method doesn't work for ASCII Code letters and numbers ,
  • And it's not about these ASCII Punctuation is encoded ：- _ . ! ~ * ' ( ).
  • Other characters （ such as ：;/?:@&=+$,# These are used to separate URI Punctuation of components ）, Are replaced by one or more hexadecimal escape sequences .

• Inverse function
  decodeURIComponent

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

3、 ... and 、encodeURIComponent() function And encodeURI() Difference of function ?

The former assumes that its parameters are URI Part of （ Like agreements 、 Host name 、 Path or query string ）

encodeURIComponent() Function uses escape to separate URI Punctuation of parts .

Personal understanding ：encodeURIComponent() take URL String to URL The address can identify the slave parameter without affecting the transfer of the parameter , for example （/ : ? & = Everything is standard URL A string that passes parameters , Therefore, it is necessary to escape all ）,encode() No effect URL Overall structure , But the parameter is not asscii The value of the code needs to be changed

var set1 = ";,/?:@&=+$";  //  Reserved characters 
var set2 = "-_.!~*'()";   //  Do not escape characters 
var set3 = "#";           //  Digital signs 
var set4 = "ABC abc 123"; //  Alphanumeric characters and spaces 

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 ( The space is encoded as  %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

Four 、 Use scenarios

1. If it's just encoding strings , Don't URL It's half a dime , Then use escape.

2. If you need to code the entire URL, And then you need to use this URL

use encodeURI

encodeURI("http://www.cnblogs.com/season-huang/some other thing");
// "http://www.cnblogs.com/season-huang/some%20other%20thing";

After encoding, it becomes , Spaces are encoded as %20

It was used encodeURIComponent

encodeURI("http://www.cnblogs.com/season-huang/some other thing");
// "http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"

even “/” It's all coded , Whole URL It's useless .

3、 When you need to code URL When the parameter in , that encodeURIComponent It's the best way .

var param = 'http://www.cnblogs.com/season-huang/' // param Is the parameter 
param = encodeURIComponent(param) // http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F
var url = 'http://www.cnblogs.com?next=' + param
console.log(url) // "http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"

I see a , In the parameter “/” Can code , If you use encodeURI There must be something wrong , Because of the back / It needs to be coded .