浏览器自带方法解码Base64

2022年06月14日Web前端0

由于公司内部的埋点上报接口在electon下无法使用chrome的插件，导致不能直接看到上报的实际参数，因为参数是使用Base64简单处理的。找了埋点系统的文档，发现其解码Base64的过程过于复杂，就想到了浏览器自带的atob和btoa这对方法。

btoa

该方法是将字符串转为Base64编码的ASCII字符串。

window.btoa('123'); // "MTIz"
window.btoa('abc'); // "YWJj"
window.btoa('测试一下'); // VM126923:1 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

处理中文的时候出现了报错。由于该方法是将传入的字符串中每个字符视为二进制数据的字节，所以正常范围在0x00到0xFF之间。而中文需要特殊处理下。

中文特殊处理

浏览器自带的处理中文的方法很多，比如encodeURI、encodeURIComponent、escape。

encodeURI('测试一下'); // "%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B"
btoa(encodeURI('测试一下')); // "JUU2JUI1JThCJUU4JUFGJTk1JUU0JUI4JTgwJUU0JUI4JThC"

encodeURIComponent('测试一下'); // "%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B"
btoa(encodeURIComponent('测试一下')); // "JUU2JUI1JThCJUU4JUFGJTk1JUU0JUI4JTgwJUU0JUI4JThC"

escape('测试一下'); // "%u6D4B%u8BD5%u4E00%u4E0B"
btoa(escape('测试一下')); // "JXU2RDRCJXU4QkQ1JXU0RTAwJXU0RTBC"

解码 atob

atob方法则是对经过Base64转码的字符串解码出来，使用方法和btoa相反。

atob('YWJj'); // "abc"

decodeURI(atob("JUU2JUI1JThCJUU4JUFGJTk1JUU0JUI4JTgwJUU0JUI4JThC")); // "测试一下"

对于中文，依旧可以解码出来。

注意此处的方法嵌套顺序，类似于堆栈，先进先出。转码的过程最后一步是btoa，那么解码的第一步就是atob，再解码中文的处理。