原生 JS 的 Base64 转码
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 转码的更多相关文章
- 原生js实现Base64编码解码
注:ie10+ var str = window.btoa("liusong"); console.log(str); var s = window.atob("bGl1 ...
- 原生js星星评分源码
html: <div id="fiveStars"> <div>到场时间:<img v-for="(star,index) in stars ...
- 前端对base64编码的理解,原生js实现字符base64编码
目录 常见对base64的认知(不完全正确) 多问一个为什么,base64到底是个啥? 按照我们的思路实现一下 到这里基本就实现了,结果跟原生的方法打印的是一样的 下一次 @( 对于前端工程师来说ba ...
- 原生JS研究:学习jquery源码,收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
- 新浪博客:html+css+原生JS+Ajax初级+mySql数据库——源码
**************************************************************************************************** ...
- 原生js动画效果(源码解析)
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- JS图片上传后base64转码
代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- 原生JS插件(超详细)
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...
随机推荐
- Android 操作Sqlite
首先要用一个类来继承SQLiteOpenHelper,并必须实现 public DatabaseHelper(Context context, String name, CursorFactory f ...
- 最长公共子序列(DP)
Description 一个给定序列的子序列是在该序列中删去若干元素后得到的序列.确切地说,若给定序列 X = { x1,x2,…,xm },则另一序列Z ={ z1,z2,…,zk },X 的子序列 ...
- Java基础-内部类介绍
java内部类介绍 内部类一共分为4种 成员内部类 静态内部类 方法内部类 匿名内部类 下面我会为大家详细介绍每一个内部类!! 成员内部类 成员内部类就好像是外部类的一个成员属性,也是内部类中最常见的 ...
- 微服务与DevOps关系
随着IT技术的不断发展,从传统的IT建设模型逐步向新型IT建设模型过渡,建设模式的改变,必然影响应用系统的全生命周期.应用系统的建设经过单体应用.SOA应用.逐步走向微服务应用,至于何为单体应用.SO ...
- Java开发中常用的设计模式(三)---建造者模式
一. 模式结构 建造者模式主要包含四个角色: Product:产品角色. Builder:抽象建造者.它声明为创建一个Product对象的各个部件指定的抽象接口. ConcreteBuilder:具体 ...
- 如何解决“There is no locally stored library”的问题
今天我在用pyCharm开发网页的时候,用cdn引入js文件,但是程序报错,说“there is no locally stored library”.于是我上网找到了解决方案,特整理如下: 在你报错 ...
- Vue.js 的一些小技巧
给 props 属性设置多个类型 这个技巧在开发组件的时候用的较多,为了更大的容错性考虑,同时代码也更加人性化: export default { props: { width: { type: [S ...
- 163. [USACO Mat07] 牛语
☆ 输入文件:latin.in 输出文件:latin.out 简单对比 时间限制:1 s 内存限制:128 MB 译: zqzas 奶牛们听说猪发明了一种秘密语言,叫做"猪语 ...
- BS网站架构演变
BS网站架构演变 网站架构的整个演变过程主要是围绕大数据和高并发这两个问题展开的,解决的方案主要分为使用缓存和使用多资源两种类型.多资源主要指多存储(包括多内存).多CPU和多网络,对于多资源来说又可 ...
- CSS深入理解之float(HTML/CSS)
float的设计初衷仅仅是:为了文字环绕效果 float的包裹与破坏 包裹:收缩.坚挺.隔绝(BFC) 破坏:父元素高度塌陷 <!DOCTYPE html> <html> &l ...