encodeURI和encodeURIComponent使用场景的区别

[szuzsq]

网上讲解得不是很懂
假如我有个连接地址:

var name = "张三"
var success = "http://host/success";

var url = "http://host/reg?name=" + name + "&success=" + success;

如果要访问这个url应该怎么转义呢?

[天际的海浪]

encodeURI 是用于编码一个完整的url，它不会对;/?:@&=+$,#等在url中具有特殊含义的 ASCII 标点符号字符进行编码。编码后可以正常发送到 web 服务器进行请求。 encodeURIComponent会对;/?:@&=+$,#等字符也进行编码。适用于对url中的参数内容部分编码。 所以你要对url中的参数内容部分编码应该用encodeURIComponent var url = "http://host/reg?name=" + encodeURIComponent(name) + "&success=" + encodeURIComponent(success);

[szuzsq]

引用 1 楼 天际的海浪 的回复:

encodeURI 是用于编码一个完整的url，它不会对;/?:@&=+$,#等在url中具有特殊含义的 ASCII 标点符号字符进行编码。编码后可以正常发送到 web 服务器进行请求。
encodeURIComponent会对;/?:@&=+$,#等字符也进行编码。适用于对url中的参数内容部分编码。
所以你要对url中的参数内容部分编码应该用encodeURIComponent
var url = "http://host/reg?name=" + encodeURIComponent(name) + "&success=" + encodeURIComponent(success);

我是不是可以这样理解:
一、为什么要对url进行转义？
1、http规定url不支持某些字符，如中文。
2、某些数据，会引起解析错误。例如：

http://host/reg?name=张三&success=http://host/success

这个url的意思是：如果注册成功，则跑到另一个界面上去。
而这里，两个http://，就有点奇怪了。

二、主要转义哪部分？
主要是为了转义参数值那部分，其他部分按要求写就了。例如：

http://host/reg?name=张三&alias=老二&sex=1&age=2

张三、老二这些值，需要转义

三、怎么转义？
1、严格的转义应该是，针对一个个值，调用encodeURIComponent。例如：

console.log("http://host/reg?name=" + encodeURIComponent("张三") + "&alias=" + encodeURIComponent("老二") + "&sex=" + encodeURIComponent("1") + "&age=" + encodeURIComponent("2"));

2、encodeURI可以看成是一种偷懒的方式，当一个个值中，没有;/?:@&=+$,#这些时，直接对整条url调用encodeURI

console.log(encodeURI("http://host/reg?name=张三&alias=老二&sex=1&age=2"));