web前端编码：encodeURI、encodeURIComponent、btoa

标签：

1.encodeURI

encodeURI是用来编码URI的，最常见的就是编码一个URL。 encodeURI会将需要编码的字符转换为UTF-8的格式。与escape一样字符被编码后均以%起始。 但是对于保留字符（;,/?:@&=+$#），以及非转义字符（字母数字以及-_.!~*‘()）不会进行转义。

例如URL中包含中文：

encodeURI(‘http://www.我.com‘)   // => "http://www.%E6%88%91.com"

由于encodeURI不转义&, +, 和 =。所以URL参数的值是无法转义的，比如我们想把a=?传给服务器：

encodeURI(‘http://www.我.com?a=?‘)   // => "http://www.%E6%88%91.com?a=?"

服务器收到的a值为空，因为?是URL保留字符。此时我们需要用encodeURIComponent来编码！

2.encodeURIComponent

顾名思义，encodeURIComponent是用来编码URI参数的。它只会跳过非转义字符（字母数字以及-_.!~*‘()）， URL保留字符（;,/?:@&=+$#）均会被转义。比如上面的例子：

// => "http://www.我.com?a=%3F"
encodeURI(‘http://www.我.com‘) + ‘?a=‘ + encodeURIComponent(‘?‘);   

因为encodeURIComponent会编码所有的URL保留字，所以不适合编码URL，例如：

encodeURIComponent(‘http://www.我.com‘)
"http%3A%2F%2Fwww.%E6%88%91.com"

3.btoa

btoa（binary-to-alphabet）的解码函数为atob，它们可以进行二进制到文本的编码，这种编码规则称为Base64编码。 

Base64通常用于将二进制文件编码到HTML或者URL中，方便在Web应用中传输。 有些文本编辑器中，会将你的图片直接编码为Base64格式插入到HTML中，而不是将它存为单独的图片文件。 例如下面的代码将会生成这个红点：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

这里稍微解释一下为什么Base64编码的最后会出现几个等号：

二进制文件是按字节存储的，每字节表示的信息是8位；Base64每一个编码字符表示的信息是6位。 它们最小公倍数是24，编码时以24位为单位进行处理最为方便。比如下面是一个可行的编码方式：

1. 拿出3个二进制字节，它们的信息是24位。
2. 把这24位信息存为4个Base64字符。

为了能够正确解码，当原数据长度不是3的倍数时，差几个就在编码结束加几个=。 

web前端编码：encodeURI、encodeURIComponent、btoa

标签：

原文地址：http://www.cnblogs.com/shytong/p/5102256.html