javascript使用btoa和atob来进行Base64转码和解码

 更新时间:2017年03月20日 15:57:32   作者:jiangxiaobo  
javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用。当前html5标准正式化之际,Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现

javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用。当前html5标准正式化之际,Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现。

好了,前言说了一大堆,Base64转码和解码有哪些方法:

一.我们来看看,在javascript中如何使用Base64转码

var str = 'javascript';

window.btoa(str)
//转码结果 "amF2YXNjcmlwdA=="

window.atob("amF2YXNjcmlwdA==")
//解码结果 "javascript"

二.对于转码来说,Base64转码的对象只能是字符串,因此来说,对于其他数据还有这一定的局限性,在此特别需要注意的是对Unicode转码。

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的使用方法就是这么简单,大家可以尝试一下。希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • JavaScript组合继承详解

    JavaScript组合继承详解

    这篇文章主要介绍了JavaScript组合继承,下面文章将围绕了JavaScript组合继承的相关资料展开详细内容,需要的小伙伴可以参考一下,希望对你有所帮助
    2021-11-11
  • 微信小程序 生命周期函数详解

    微信小程序 生命周期函数详解

    这篇文章主要介绍了微信小程序 生命周期函数的相关资料,需要的朋友可以参考下
    2017-05-05
  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能

    这篇文章主要介绍了微信小程序列表项滑动显示删除按钮的相关资料,需要的朋友可以参考下
    2017-04-04
  • webpack安装配置及使用教程详解

    webpack安装配置及使用教程详解

    这篇文章主要为大家介绍了webpack的安装配置及使用的教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • JavaScript实现文本转换为文件示例详解

    JavaScript实现文本转换为文件示例详解

    这篇文章主要为大家介绍了JavaScript实现文本转换为文件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 可输入的下拉框

    可输入的下拉框

    可输入的下拉框...
    2006-06-06
  • app场景下uniapp的扫码记录

    app场景下uniapp的扫码记录

    这篇文章主要为大家介绍了app场景下uniapp的扫码记录实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 前端算法题解leetcode49-字母异位词分组

    前端算法题解leetcode49-字母异位词分组

    这篇文章主要为大家介绍了前端算法leetcode49-字母异位词分组解题示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JS 4个超级实用的小技巧 提升开发效率

    JS 4个超级实用的小技巧 提升开发效率

    JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧,在平时的工作中可以大大的缩短代码量和开发时间。,需要的朋友可以参考下面文章内容哟
    2021-09-09
  • 微信小程序 欢迎页面的制作(源码下载)

    微信小程序 欢迎页面的制作(源码下载)

    这篇文章主要介绍了微信小程序 欢迎页面的制作含(源码下载)的相关资料,这里实现欢迎页面,开始做应用的时候都会用到,需要的朋友可以参考下
    2017-01-01

最新评论