encodeURI()、encodeURIComponent()、escape()

想了解这几个方法的含义，首先需要了解URI。

如上图所示，URI就是是URL或者URN或者两者的组合。

我们可以说，URL和URN肯定都是URI，但是URI不一定是URL和URN。

那么URL和URN是什么呢？(参考：http://web.jobbole.com/83452/)

通俗来说，如果要查看一个人的住址信息，那么地址相当于URL，人的身份证相当于URN。

URL：统一资源定位符；

URL是URI的一种，不仅标识了Web 资源，还指定了操作或者获取方式，同时指出了主要访问机制和网络位置。

URN：统一资源名称；

URN是URI的一种，用特定命名空间的名字标识资源。使用URN可以在不知道其网络位置及访问方式的情况下讨论资源。

下面是URI的通用格式

 协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数1=值1&参数2=值2+值3#标志

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

如上面示例，URI由很多URI组件构成，协议、用户名、密码...等等。

每个组件之间都有一个分隔符，示例中有的有 : / @ ? = # & +

还有其他的分隔符 ; $ ,

encodeURIComponent() 函数与 encodeURI() 函数区别

encodeURIComponent() 函数与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。

因此 encodeURIComponent(URIString) 函数将转义用于分隔 URI 各个部分的标点符号，即上面所说的分隔符。

encodeURI(URIString) 函数则是对URI进行完整的编码，不会转义上面的分隔符。

const str = "http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor";
encodeURI(str)
// http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor
encodeURIComponent(str)
// http%3A%2F%2Fusername%3Apassword%40www.example.com%3A80%2Fpath%2Fto%2Ffile.php%3Ffoo%3D316%26bar%3Dthis%2Bhas%2Bspaces%23anchor

encodeURIComponent() 函数与 encodeURI() 函数相同点

两个函数都不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )

因此字母，数字和上面的符号称为非转义字符。

对于非转义字符的转义如下：

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()*~_-]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

escape()函数

escape()函数已经从新的web标准中废除，请尽量不要使用！！