javascript使用btoa和atob來進行Base64轉(zhuǎn)碼和解碼
更新時間：2017年03月20日 15:57:32 作者：jiangxiaobo
javascript原生的api本來就支持,Base64,但是由于之前的javascript局限性，導(dǎo)致Base64基本中看不中用。當(dāng)前html5標準正式化之際，Base64將有較大的轉(zhuǎn)型空間,對于Html5 Api中出現(xiàn)的如FileReader Api, 拖拽上傳,甚至是Canvas,Video截圖都可以實現(xiàn)
javascript原生的api本來就支持,Base64,但是由于之前的javascript局限性，導(dǎo)致Base64基本中看不中用。當(dāng)前html5標準正式化之際，Base64將有較大的轉(zhuǎn)型空間,對于Html5 Api中出現(xiàn)的如FileReader Api, 拖拽上傳,甚至是Canvas,Video截圖都可以實現(xiàn)。
好了，前言說了一大堆，Base64轉(zhuǎn)碼和解碼有哪些方法：
一.我們來看看，在javascript中如何使用Base64轉(zhuǎn)碼
var str = 'javascript';
window.btoa(str)
//轉(zhuǎn)碼結(jié)果 "amF2YXNjcmlwdA=="
window.atob("amF2YXNjcmlwdA==")
//解碼結(jié)果 "javascript"
二.對于轉(zhuǎn)碼來說，Base64轉(zhuǎn)碼的對象只能是字符串，因此來說，對于其他數(shù)據(jù)還有這一定的局限性，在此特別需要注意的是對Unicode轉(zhuǎn)碼。
var str = "China，中國" window.btoa(str)
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
很明顯，這種方式是不行的，那么如何讓他支持漢字呢，
這就要使用window.encodeURIComponent和window.decodeURIComponent
var str = "China，中國";
window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="
window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China，中國"
btoa與atob的使用方法就是這么簡單,大家可以嘗試一下。希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript組合繼承，下面文章將圍繞了JavaScript組合繼承的相關(guān)資料展開詳細內(nèi)容,需要的小伙伴可以參考一下，希望對你有所幫助2021-11-11
這篇文章主要介紹了微信小程序 生命周期函數(shù)的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序列表項滑動顯示刪除按鈕的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了webpack的安裝配置及使用的教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
JavaScript實現(xiàn)文本轉(zhuǎn)換為文件示例詳解
這篇文章主要為大家介紹了JavaScript實現(xiàn)文本轉(zhuǎn)換為文件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
可輸入的下拉框...2006-06-06
這篇文章主要為大家介紹了app場景下uniapp的掃碼記錄實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了前端算法leetcode49-字母異位詞分組解題示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
JS有很多小技巧可以使代碼更精簡、更簡單。今天主要分享4個技巧，在平時的工作中可以大大的縮短代碼量和開發(fā)時間。,需要的朋友可以參考下面文章內(nèi)容喲2021-09-09
這篇文章主要介紹了微信小程序 歡迎頁面的制作含（源碼下載）的相關(guān)資料,這里實現(xiàn)歡迎頁面，開始做應(yīng)用的時候都會用到，需要的朋友可以參考下2017-01-01