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. BATJ面试必会之Java IO 篇

    一.概览 二.磁盘操作 三.字节操作 实现文件复制 装饰者模式 四.字符操作 编码与解码 String 的编码方式 Reader 与 Writer 实现逐行输出文本文件的内容 五.对象操作 序列化 S ...

  2. git常用命令小记

    git status 查看缓存区和工作区的状态 +表示N个新文件 ~表示N个修改 -表示N个删除 两组的时候前面的是暂存区,后面的是工作区 git add fileName 变更文件状态(工作区--& ...

  3. const 指针

    使用指针时要涉及两个目标,即指针本身和指针所指的对象.关于const指针变量,可归结为以下三种: 1.指向常量的指针变量: 2.常指针变量: 3.指向常量的常指针变量. 一.指向常量的指针变量:声明格 ...

  4. Servlet的数据库访问

    创建数据库:   import java.sql.*; public class SqlUtil { static { try { Class.forName("com.mysql.jdbc ...

  5. Tomcat9 配置在Windows7 64位 上安装步骤

    安装 Tomcat 之前先安装java JDK . 本人在安装Tomcat之前,java的jdk安装的是jdk 11版本.安装java 网上教程一大把,我这里不再阐述. 百度直接搜 Tomcat,如下 ...

  6. java利器------反射机制

    java反射的概念:java的反射机制是指在运行状态下,对于一个类来说,可以得到这个类的所有方法和属性.对于一个对象来说,可以调用这个对象的人和方法和属性. 反射机制首先会拿到该类的字节码文件(Cla ...

  7. java存储图片

    import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import java.util. ...

  8. Python 2 和 Python 3 有哪些主要区别

    概述# 原稿地址:使用 2to3 将代码移植到 Python 3 几乎所有的Python 2程序都需要一些修改才能正常地运行在Python 3的环境下.为了简化这个转换过程,Python 3自带了一个 ...

  9. 动态计算area位置

    window.onresize = adjuest; function adjuest(){ var picw = $(".imgbox img").width(); var pi ...

  10. 正能量:You Are the Best

    Success comes from knowing that you did your best to become the best that you are capable of becomin ...