zqifa的博客

我不管,反正我最萌~

js学习window对象函数window.btoa和window.atob

前言

btoaatob 是window对象的两个函数,用来编码解码Base64

window对象函数window.btoa和window.atob简介

1.btoa:是binary to ascii,用于将binary的数据用ascii码表示,即Base64的编码过程。
2.atob:是ascii to binary,用于将ascii码解析成binary数据,即Base64的解码过程。

btoa 和 atob 使用方法:

1.window.atob(string)/atob(string):解码,用来解码一个已经被base-64编码过的字符串。(参数string: 必需是一个通过 btoa() 方法编码的字符串)。
2.window.btoa(string)/btoa(string):编码,用来创建一个 base-64编码的字符串。

1.btoa

用于将binary的数据用ascii码表示。经常使用于编码字符串。

示例代码:

var str = "This is a string";
var encoded_str = btoa(str);
console.log(encoded_str); // Outputs: "VGhpcyBpcyBhIHN0cmluZw=="

注意:不能编码Unicode字符

2.atob

ascii to binary,用于将ascii码解析成binary数据。用于解码Base64编码的字符串。

示例代码:

var encoded_str = "VGhpcyBpcyBhIHN0cmluZw==";
var str= atob(encoded_str);
console.log(str); // Outputs: "This is a string"

如何让btoa支持Unicode字符编码

编码时,先用encodeURIComponent对字符串进行编码,再用btoa进行Base64编码。
解码时,先用atob对Base64编码的串进行解码,再用decodeURIComponent对字符串进行解码。

示例代码:

var str = "hello,中国";
var encoded_str = btoa(encodeURIComponent(str));
var decoded_str = decodeURIComponent(atob(encoded_str));
console.log(encoded_str); // Outputs: "aGVsbG8lMkMlRTQlQjglQUQlRTUlOUIlQkQ="
console.log(decoded_str); // Outputs: "hello,中国"

注意:
1.编码的过程:Unicode字符 ——-> 先encodeURI ——-> 再btoa编码
2.解码的过程:先atob解码 ——-> 再decodeURI ——-> Unicode字符

示例代码:

//编码,输出:"MTIzNDU2"
window.btoa("123456");
//解码,输出:123456
window.atob("MTIzNDU2");

//编码,输出:"5Lit5paH"
btoa(unescape(encodeURIComponent("中文")))
//解码,输出:"中文"
decodeURIComponent(escape(atob("5Lit5paH")))

IE9不支持atob、btoa

1.在使用atob和btoa这两个函数时需要注意的是,IE9是不支持的(虽然现在基本都是面向Chrome浏览器编程)。
2.我们使用第三方Base64工具:webtoolkit.base64是一个第三方实现的 Base64 编码工具,完美的支持 unicode 编码的字符串。

done!

作者:zqifa

出处:https://www.l1mn.com

原文地址:https://www.l1mn.com/p/9fjxn.html

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

公告

昵称:zqifa

站龄: 3年11个月

博客持续完善ing,敬请期待...

打滚求打赏(๑ ̄ ̫  ̄๑)

此处弱弱求打赏~~万一有好心人呢~~

支付宝酱

支付宝赞助

微信酱

微信赞助

随笔分类

php(110)

linux(63)

python(44)

web前端(39)

js(35)

服务器(33)

mysql(30)

html(24)

docker(23)

centos(22)

windows(22)

django(20)

前端设计(18)

git(16)

数据库(14)

算法(14)

常用软件(14)

编程进阶(13)

字符编码(13)

jquery(12)

更多

我的标签

php(106)

linux(47)

python(45)

js(34)

mysql(30)

centos(28)

web前端(23)

windows(22)

docker(22)

django(20)

更多

相册

Copyright © zqifa 联系方式:z___qf@163.com