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. mysql5.0版本下载地址

    http://dev.mysql.com/downloads/mysql/5.0.html Other Downloads: Windows (x86, 32-bit), ZIP Archive 5. ...

  2. hadoop2.x学习笔记(一):YARN

    一.YARN产生的背景 MapReduce1.x存在的问题:单点故障&节点压力大不易扩展. 资源利用率&成本 催生了YARN的诞生  不同计算框架可以共享同一个HDFS集群上的数据,享 ...

  3. 对于单文本或者div的内容怎么在显示东西过多的情况下实现显示隐藏

    js代码: $(function () { var o = document.getElementById("newsdetail_ArticleContent"); Subt(o ...

  4. javascript中字符串常用操作总结

    String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不 ...

  5. mybatis在oracle中的分页扩展

    applicationContext.xml <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlS ...

  6. elasticsearch 6.3 安装手记

    系统环境 centos 7 elasticsearch 6.3 需要 JDK 8 版本,先安装 JDK 8. ES6.3 安装地址: https://www.elastic.co/guide/en/e ...

  7. 《Programming iOS 7》读书笔记 - 窗体大小与状态栏

    1.从iOS7开始,状态栏开始变为透明的,根识图占领了整个窗体,包括状态栏后面的20像素高的区域,这种样式无法被改变.iOS6的状态栏是不透明的,窗体的尺寸通常会比屏幕的尺寸要小,可以设置窗体的尺寸为 ...

  8. 【学习笔记】--- 老男孩学Python,day18 面向对象------ 属性,类方法,静态方法

    属性 属性: 将方法伪装成一个属性,代码上没有什么提升,只是更合理. 应用场景: 类中 要用名词时候可以用@property  比如,求面积,周长,平方,体脂 等运算时候 例如:   bmi是名词,最 ...

  9. css雪碧技术的用法。

    ---恢复内容开始--- 在目前前端开发阶段,页面会出现大量的小图片,服务器加载的时候比较吃力,怎么用 一种办法把图片都合并到一张图片上呢?这就用到了css雪碧技术. 雪碧技术是雪碧团队开发,也有人叫 ...

  10. setTimeout OR setInterval?

    setTimeout 和setInterval从字面上应该是可以知道其大意的.timeout:延时:interval:间隔: 两者的区别就像是它们自己的英文解释一样:setTimeout是延时执行,并 ...