这两天拉取GitHub数据时候，发现Base64的加密解密有点问题（不考虑Accept），于是查资料延伸出相关内容，整理发给小伙伴们。
市面上一大堆现成的转码库，但是秉承着 能少则少，能原生则原生 的策略，我们优先考虑JS自带的转码工具（万不得已再考虑别人的，比如无法实现）。
另外注意，这里是转码，不是加密，转码和加密是两个概念。简单来说，转码是为了能够正常使用，而加密是为了仅自己人能正常使用。
Escape这个是顺便提一下，普通的纯字符串编码，注意是纯字符串，跟下面说的链接是不同的
转码
escape("中文") => "%u4E2D%u6587"
解码
unescape("%u4E2D%u6587") => "中文"
敏锐的小伙伴可能见过感觉见过类似的%xx的结构，是的，你现在明白了吗？
URI方面
关于URI的转码问题，主要是出现在链接包含中文的问题中，虽说现在基本上已经支持中文，但是有时候不论是为了美观、安全还是什么原因，还是有必要转码一下。
转码
-
encodeURI，转码后链接还需要正常使用
encodeURI("https://zweizhao.com/文章/JS常用转码URI与Base64.md")
=>"https://zweizhao.com/%E6%96%87%E7%AB%A0/JS%E5%B8%B8%E7%94%A8%E8%BD%AC%E7%A0%81URI%E4%B8%8EBase64.md"转码后的链接还是一个正常链接，是可以做跳转操作的。
-
encodeURIComponent，转码后链接不再当做正常链接使用，比如作为参数
var pa = encodeURIComponent("https://zweizhao.com/文章/JS常用转码URI与Base64.md") console.log(pa) // "https%3A%2F%2Fzweizhao.com%2F%E6%96%87%E7%AB%A0%2FJS%E5%B8%B8%E7%94%A8%E8%BD%AC%E7%A0%81URI%E4%B8%8EBase64.md" var realURI = "https://zweizhao.com/any?param=" + pa // "https://zweizhao.com/any?param=https%3A%2F%2Fzweizhao.com%2F%E6%96%87%E7%AB%A0%2FJS%E5%B8%B8%E7%94%A8%E8%BD%AC%E7%A0%81URI%E4%B8%8EBase64.md" // todo...其他使用方式上面的pa已经是一堆非链接的字符串了，所以可以当做纯参数等使用。
二者区别
函数 说明 使用场景 encodeURI 不转码这些：ASCII字母、数字、~!@#$&()=:/,;?+'\| 链接里面内容进行转换 encodeURIComponent 不转吗这些：ASCII字母、数字、~!()'* 无差别转换整个链接
解码
解码就简单了，相对转码反着用即可。
-
decodeURI
var en = encodeURI("https://zweizhao.com/文章/JS常用转码URI与Base64.md") console.log(en) // "https://zweizhao.com/%E6%96%87%E7%AB%A0/JS%E5%B8%B8%E7%94%A8%E8%BD%AC%E7%A0%81URI%E4%B8%8EBase64.md" var de = decodeURI(en) console.log(de) // "https://zweizhao.com/文章/JS常用转码URI与Base64.md" -
decodeURIComponent
var en = encodeURIComponent("https://zweizhao.com/文章/JS常用转码URI与Base64.md") console.log(en) // "https%3A%2F%2Fzweizhao.com%2F%E6%96%87%E7%AB%A0%2FJS%E5%B8%B8%E7%94%A8%E8%BD%AC%E7%A0%81URI%E4%B8%8EBase64.md" var de = decodeURIComponent(en) console.log(de) // "https://zweizhao.com/文章/JS常用转码URI与Base64.md"
实际业务中，encodeURIComponent与decodeURIComponent相对使用较多。
Base64方面
看到这里请记住，以后Base64转码解码不用再去百度或Google找在线库了，直接ctrl+shift+i调出Chrome的调试器，使用btoa与atob转码与解码即可。转码
btoa("i am your boyfriend.") => "aSBhbSB5b3VyIGJveWZyaWVuZC4="
解码
atob("aSBhbSB5b3VyIGJveWZyaWVuZC4=") => "i am your boyfriend."
虽说好用，但是有个坑对我们来说很不友好，恩，中文，如下：
btoa("中文") // The string to be encoded contains characters outside of the Latin1 range.意思就是超出支持范围，ASCII。
但是，如果你非要使用btoa来base64转码中文，也不是不行，就是略微蛋疼。如下：
btoa(escape("中文")) // "JXU0RTJEJXU2NTg3"
unescape(atob("JXU0RTJEJXU2NTg3")) // "中文"
btoa(encodeURI("https://zweizhao.com/文章/JS常用转码URI与Base64.md"))
// "aHR0cHM6Ly96d2Vpemhhby5jb20vJUU2JTk2JTg3JUU3JUFCJUEwL0pTJUU1JUI4JUI4JUU3JTk0JUE4JUU4JUJEJUFDJUU3JUEwJTgxVVJJJUU0JUI4JThFQmFzZTY0Lm1k"
decodeURI(atob("aHR0cHM6Ly96d2Vpemhhby5jb20vJUU2JTk2JTg3JUU3JUFCJUEwL0pTJUU1JUI4JUI4JUU3JTk0JUE4JUU4JUJEJUFDJUU3JUEwJTgxVVJJJUU0JUI4JThFQmFzZTY0Lm1k"))
// "https://zweizhao.com/文章/JS常用转码URI与Base64.md"
btoa(encodeURIComponent("https://zweizhao.com/文章/JS常用转码URI与Base64.md"))
// "aHR0cHMlM0ElMkYlMkZ6d2Vpemhhby5jb20lMkYlRTYlOTYlODclRTclQUIlQTAlMkZKUyVFNSVCOCVCOCVFNyU5NCVBOCVFOCVCRCVBQyVFNyVBMCU4MVVSSSVFNCVCOCU4RUJhc2U2NC5tZA=="
decodeURIComponent(atob("aHR0cHMlM0ElMkYlMkZ6d2Vpemhhby5jb20lMkYlRTYlOTYlODclRTclQUIlQTAlMkZKUyVFNSVCOCVCOCVFNyU5NCVBOCVFOCVCRCVBQyVFNyVBMCU4MVVSSSVFNCVCOCU4RUJhc2U2NC5tZA=="))
// "https://zweizhao.com/文章/JS常用转码URI与Base64.md"如果文章对你有一点点帮助，我就非常开心了。
我是风蓝小栖，喜欢我的文章请关注一下，定期更新技术文章，慢慢干货。