JavaScript 原生提供两个 Base64 相关的方法:

  • btoa():任意值转为 Base64 编码
  • atob():Base64 编码转为原来的值
注意:这两个方法不适合非 ASCII 码的字符,会报错。

要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节:
  • encodeURIComponent()  该方法会转码除了语义字符之外的所有字符,即元字符也会被转码。
Base64 编码转为原来的值时,同样需要转码:
  • decodeURIComponent()  该方法是 encodeURIComponent()方法的逆运算。
示例:
const str = "Hello, world!";
const strToBase64 = btoa(encodeURIComponent(str));
console.log(strToBase64); // SGVsbG8lMkMlMjB3b3JsZCE=
const base64ToStr = decodeURIComponent(atob(strToBase64));
console.log(base64ToStr); // Hello, world!

原生 JS 的 Base64 转码的更多相关文章

  1. 原生js实现Base64编码解码

    注:ie10+ var str = window.btoa("liusong"); console.log(str); var s = window.atob("bGl1 ...

  2. 原生js星星评分源码

    html: <div id="fiveStars"> <div>到场时间:<img v-for="(star,index) in stars ...

  3. 前端对base64编码的理解,原生js实现字符base64编码

    目录 常见对base64的认知(不完全正确) 多问一个为什么,base64到底是个啥? 按照我们的思路实现一下 到这里基本就实现了,结果跟原生的方法打印的是一样的 下一次 @( 对于前端工程师来说ba ...

  4. 原生JS研究:学习jquery源码,收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  5. 新浪博客:html+css+原生JS+Ajax初级+mySql数据库——源码

    **************************************************************************************************** ...

  6. 原生js动画效果(源码解析)

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  7. JS图片上传后base64转码

    代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...

  8. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  9. 原生JS插件(超详细)

    作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...

随机推荐

  1. C# 在同一个项目里启动不同的类文件

    比如有两个类文件分别为 Person.cs 和 Enum.cs : using System; using person; namespace HelloWorld { class HelloWorl ...

  2. [WC 2018]州区划分

    Description 题库链接 小 \(S\) 现在拥有 \(n\) 座城市,第 \(i\) 座城市的人口为 \(w_i\) ,城市与城市之间可能有双向道路相连. 现在小 \(S\) 要将这 \(n ...

  3. 使用Repeater控件实现三层嵌套以及分页效果

    PS: 第一次用Repeater控件 记录一下 请忽略我的命名不规范  请忽略我的最终效果图(太丑了) 需要用到的朋友可以自行调整的漂亮点 ====================最终效果图===== ...

  4. [javaSE] 类型转换(1加1等于几)

    打印 ‘a’+1,输出98,解释:’a’是char类型占2个8bit,1是int类型占4个,’a’字符会被自动强制转换为int类型对应ascii码表97 打印’1’+1,输出 50,解释:’1’是ch ...

  5. Hibernate中一级缓存概念以及flush与clear的区别

    Hibernate采用缓存机制提高数据查询效率.缓存分为一级缓存和二级缓存,一级缓存在Session中存在,二级缓存需要手动配置. 在一级缓存中,如果数据保存到数据库中后,而session又没有关闭的 ...

  6. hdu Rescue 1242

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  7. Hive可视化工具

    目前市面上的Hive可视化客户端工具,大都是C/S模式的,安装使用都不是太方便,目前有一款基于WEB的可视化工具TreeSoft,通过浏览器就可以访问使用了,并且可以同时管理.维护.监控MySQL,O ...

  8. mysql行转列,列转行

    行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SERVER 2005 新增的运算符PIVOT来实现.用传统的方法,比较好理解.层次清 ...

  9. 【 js 片段 】移动端适配简易步骤

    手机端全部适配简易步骤,不确保没有bug. 1.HTML 的 head 部分中加入如下代码: <meta name="viewport" content="widt ...

  10. Exam E05-001 Information Storage and Management Version 3 Exam

    Emc 考试 e05-001信息存储和管理版本3考试 [总问题:171] 哪种 emc 产品提供软件定义的存储基础架构的自动监视和报告? A. viprSrmB. 斯纳普内C. 阿瓦马尔D. 快速副总 ...