JavaScript中的各种编码

1 encodeURIComponent() 和 decodeURIComponent()

1.1 encodeURIComponent是什么

encodeURIComponent() 是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码）。

1.2 转义规则

encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、’、-和_之外的所有字符。

1.3 转义报错

// 正常
encodeURIComponent('\uD800\uDFFF')

// 只有高位，将抛出"URIError: malformed URI sequence"
encodeURIComponent('\uD800')

// 只有低位，将抛出"URIError: malformed URI sequence"
encodeURIComponent('\uDFFF')

1.4 用途

为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。比如，一个用户可能会输入"Thyme &time=again"作为comment变量的一部分。如果不使用encodeURIComponent对此内容进行转义，服务器得到的将是comment=Thyme%20&time=again。请注意，"&“符号和”="符号产生了一个新的键值对，所以服务器得到两个键值对（一个键值对是comment=Thyme，另一个则是time=again），而不是一个键值对。

对于 application/x-www-form-urlencoded (POST) 这种数据方式，空格需要被替换成 ‘+’，所以通常使用 encodeURIComponent 的时候还会把 “%20” 替换为 “+”。

2 decodeURI() 和 encodeURI()

ECMAScript v3 已从标准中删除了 unescape() / escape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

encodeURI已经被encodeURIComponent取代

其中encodeURI()主要用于整个URI(例如，http://www.jxbh.cn/illegal value.htm)，而encode-URIComponent()主要用于对URI中的某一段(例如前面URI中的illegal value．htm)进行编码。它们的主要区别在于，encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而encodeURIComponent()则会对它发现的任何非标准字符进行编码。来看下面的例子：

var uri="http://www.jxbh.cn/illegal value.htm#start";

// http: //www.jxbh.cn/illegal%20value .htm#s tart
console.log( encodeURI (uri) )

// http% 3A%2F%2Fwww.jxbh.cn%2 Fillegal%2 0value. htm%23 start
console.log( encodaURIComponent (uri))

3 Base64编码, atob 和btoa

var encodedData = window.btoa('Hello, world'); // encode a string
var decodedData = window.atob(encodedData); // decode the string

Base64编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64也被一些应用（包括使用MIME的电子邮件）和在XML中储存复杂的数据时使用。

在JavaScript中，有2个函数分别用来处理解码和编码base64 字符串：

• atob()
• btoa()

atob() 函数能够解码通过base-64编码的字符串数据。如果传入字符串的长度不是4的倍数，则抛出DOMException。
相反地，btoa() 函数能够从二进制数据“字符串”创建一个base-64编码的ASCII字符串。

4 FileReader将任意文件转换为Base64

let fileReader = document.getElementsByClassName('fileReader')[0]
let file = fileReader.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (data) => {
  base64_con = e.target.result;
  // 可以赋值给 img.src实现预览
}

• nodejs解析

// 解码base64数据
var bitmap = new Buffer(base64str, 'base64');
// 存储文件
fs.writeFileSync(file, bitmap);