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. [转] ASP.NET MVC 模型绑定的功能和问题

    摘要:本文将与你深入探究 ASP.NET MVC 模型绑定子系统的核心部分,展示模型绑定框架的每一层并提供扩展模型绑定逻辑以满足应用程序需求的各种方法. 同时,你还会看到一些经常被忽视的模型绑定技术, ...

  2. nc63 树管理型单据的开发

    <?xml version="1.0" encoding="gbk"?><beans xmlns="http://www.sprin ...

  3. EF CodeFirst 初识

    随着EntityFramework的发展,原先的三种方式,{Code First ,Model First,Database First }  CodeFirst基本摆脱了另外两种方式 成为了 最受欢 ...

  4. Bash:常用命令工具-tr命令

    tr命令可以用来做简单的字符替换与删除,常用的有-d, -s选项.它的替换与删除是按单个字符来的 假设有以下文本: Read from the file words.txt and output th ...

  5. STL:vector<bool> 和bitset

    今天某个地方要用到很多位标记于是想着可以用下bitset,不过发现居然是编译时确定空间的,不能动态分配.那就只能用vector来代替一下了,不过发现居然有vector<bool>这个特化模 ...

  6. python学习之老男孩python全栈第九期_day013知识点总结

    # l = [1,2,3]# 索引# 循环 for # list # dic # str # set # tuple # f = open() # range() # enumerate'''prin ...

  7. [js样式效果]具有停顿效果上下滚动方式

    一般用于公告的滚动效果 <!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> ...

  8. YII关联查询

    原文链接:http://keshion.iteye.com/blog/1607994 一.多表关联的配置 在我们使用 AR 执行关联查询之前,我们需要让 AR 知道一个 AR 类是怎样关联到另一个的. ...

  9. CF 827E Rusty String FFT

    传送门 如果没有碍事的?的话,判定字符串的循环节直接用KMP的失配数组就可以搞定.现在有了碍事的?,我们就需要考虑更通用的算法. 考虑KMP失配数组判定字符串循环节的本质,发现判定\(k\)是否为字符 ...

  10. bzoj3167 [Heoi2013]Sao

    传送门 这题神坑啊……明明是你菜 首先大家都知道原题等价于给每个点分配一个$1$~$n$且两两不同的权值,同时还需要满足一些大于/小于关系的方案数. 先看一眼数据范围,既然写明了$n\le 1000$ ...