encodeURI()和encodeURIComponent()的区别

title: encodeURI()和encodeURIComponent()的区别
date: 2018-10-21 21:50:29
tags: [JavaScript]
categories: JavaScript

区别

encodeURI()和encodeURIComponent()方法都可以对URI（通用资源标识符）进行编码，以便发送给浏览器。
但它们编码的范围有所不用。

1. encodeURI()方法不会对下列字符编码：ASCII字母、数字、~!@#$&*()=:/,;?+'
2. encodeURIComponent()方法不会对下列字符编码：ASCII字母、数字、~!*()'

使用场景

1. 对 整个URL 进行编码就使用encodeURI()
2. 对 URL中的参数 或者 URL后面的一部分 进行编码就使用encodeURIComponent()

举例说明：

对一个URL进行编码

encodeURI("http://x.com/你好?a=1")
// 正确

假设我想在google中查询上面这个网址

encodeURI("http://google.com/search?q=http://x.com/你好?a=1")
// 正确

上面这样写没什么问题，但是如果把查询的网址更改成这样再encodeURI

encodeURI("http://google.com/search?q=http://x.com/你好?a=1&b=2")
// 错误，查询参数被&分隔了，有歧义

因为&没有被编码，这部分就不能作为一个整体的查询参数，而是被分隔成了http://x.com/%E4%BD%A0%E5%A5%BD?a=1和&b=2两部分，所以要用encodeURIComponent对&进行编码

encodeURIComponent("http://google.com/search?q=http://x.com/你好?a=1&b=2")
// 正确