JavaScript中encodeURI和encodeURIComponent区别

在JavaScript中encodeURI与encodeURIComponent不少人容易混淆两个的区别与正确用法，从英文单词上理解的话很容易看出来关键性区别的地方，即一个带Component，另一个不带。也就是说带Component的encodeURIComponent就把输入当作一个完整的部件全部编码。另一个encodeURI则是对URI进行编码，为了保证返回的参数仍然是一个有效的URI，http://或者https://的://不会被编码，来看看例子。

以https://www.qttc.net/Hello World作为入参，分别测试两个函数的返回值

> encodeURIComponent('https://www.qttc.net/Hello World')
< "https%3A%2F%2Fwww.qttc.net%2FHello%20World"

> encodeURI('https://www.qttc.net/Hello World')
< "https://www.qttc.net/Hello%20World"

可能会有同学问了：那encodeURIComponent没有使用场景啊～～，别急，还是有的，请看以下代码

function add_callback (uri) {
  let callback = encodeURIComponent('https://www.qttc.net');
  return `${uri}?callback=${callback}`
}

let uri_with_callback = add_callback('https://www.qttc.net/login.html');
console.log(uri_with_callback); // https://www.qttc.net/login.html?callback=https%253A%252F%252Fwww.qttc.net

以上举例了当你要在另一个URI的基础上填补新的参数时，就应该使用encodeURIComponent

但是，encodeURI并不是那么智能，比如以下例子

> encodeURI('https://www.qttc.net/login.html?callback=https://www.qttc.net')
< "https://www.qttc.net/login.html?callback=https://www.qttc.net"

显然，返回值并没有进行任何字符编码，实际上我们期望它应该是

https://www.qttc.net/login.html?callback=https%253A%252F%252Fwww.qttc.net

这是要小心的地方。