JavaScript encodeURI()和encodeURIComponent() 函数

在写一些前台的代码的时候会遇到一些“编码”的问题，可能会导致中文的乱码，于是找勒一下下这俩函数~~供大家参考分享下，请看下面的详细解释：

关于 encodeURI() 函数:

encodeURI() 函数可把字符串作为 URI 进行编码，基本格式大家都知道哈：

encodeURI(URIstring)

看看官方的说明：

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

提示：如果 URI 组件中含有分隔符，比如 ? 和 #，则应当使用 encodeURIComponent() 方法分别对各组件进行编码。（耐心地往下看就明白喽~）

看看它的运行实例：

<script type="text/javascript">

document.write(encodeURI("http://www.w3school.com.cn")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/"))
document.write(encodeURI(",/?:@&=+$#"))

</script>

输出：

http://www.w3school.com.cn
http://www.w3school.com.cn/My%20first/
,/?:@&=+$#

点击这里试一下！！

-----------------------------分割线-----------------------------------

关于 encodeURIComponent() 函数:

基本功能呢，和第一个函数差不多，但是肯定是有区别的（废话~）：看下面的说明

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。（这句话貌似和上面的一样..）
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。(这里要注意转移掉了~)

提示：请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

看看这个家伙的运行实例：

<script type="text/javascript">

document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))

</script>

输出：

http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

猛击这里试一试！！！

好了，上面的都是 W3school 教程上面的一些内容，让我们再来看看一些有用的料子~

encodeURI 和 encodeURIComponent都是ECMA-262标准中定义的函数,所有兼容这个标准的语言（如JavaScript, ActionScript）都会实现这两个函数。它们都是用来对URI （RFC-2396）字符串进行编码的全局函数，但是它们的处理方式和使用场景有所不同。为了解释它们的不同，我们首先需要理解RFC-2396中对于URI中的字符分类：

保留字符（reserved characters）：这类字符是URI中的保留关键字符，它们用于分割URI中的各个部分。

这些字符是：";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | "," （｜是分割线）

Mark字符（mark characters）：这类字符在RFC-2396中特别定义，但是没有特别说明用途，可能是和别的RFC标准相关。

这些字符是："-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"

基本字符（alphanum characters）：

这类字符是URI中的主体部分，它包括所有的大写字母、小写字母和数字

在介绍完上面三类字符串后，我们就非常容易来解释encodeURI和encodeURIComponent函数的不同之处了：

encodeURI: 该函数对传入字符串中的所有非（基本字符、Mark字符和保留字符）进行转义编码（escaping）。所有的需要转义的字符都按照UTF-8编码转化成为一个、两个或者三个字节的十六进制转义字符（％xx）。例如，字符空格" "转换成为"%20"。在这种编码模式下面，需要编码的ASCII字符用一个字节转义字符代替，在\u0080和\u007ff之间的字符用两个字节转义字符代替，其他16为Unicode字符用三个字节转义字符代替。

encodeURIComponent: 该函数处理方式和encodeURI只有一个不同点，那就是对于保留字符同样做转义编码。例如，字符":"被转义字符"%3A"代替
之所以有上面两个不同的函数，是因为我们在写JS代码的时候对URI进行两种不同的编码处理需求。encodeURI可以用来对完整的URI字符串进行编码处理。而encodeURIComponent可以对URI中一个部分进行编码，从而让这一部分可以包含一些URI保留字符。

这在我们日常编程中是十分有用的。比如下面的URI字符串：

http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html
在这个URI字符串中。send-to-friend.aspx页面会创建HTML格式的邮件内容，里面会包含一个链接，这个链接的地址就是上面URI字符串中的url值。显然上面的url值是URI中的一个部分，里面包含了URI保留关键字符。我们必须调用encodeURIComponent对它进行编码后使用，否则上面的URI字符串会被浏览器认为是一个无效的URI。正确的URI应该如下：

http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html

再来看两个超级简单的例子吧～～

encodeURI：

var uri="my test.asp?name=stale&car=saab"; 
document.write(encodeURI(uri));

会输出什么呢？聪明的你已经猜到了吧？输出：

my%20test.asp?name=st%C3%A5le&car=saab

encodeURIComponent:

var uri="http://jb51.net/my test.asp?name=stale&car=saab"; 
document.write(encodeURIComponent(uri)); 

输出：

http%3A%2F%2Fjb51.net%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab

在ECMA-262标准中还定义了和这两个encode函数向对应的decode全局函数，它们是decodeURI和decodeURIComponent。我们可以用它们来decode编码后的字符串。

好了，到此结束。拜~