JavaScript 实现 Base-64 编码解码

Author：若非
发布时间：January 4, 2021
2317 views
2 comments
2076 words
Categories： JavaScript

目前绝大多数浏览器已原生支持 Base-64 的编码解码（最低支持到 IE10），详细的浏览器兼容性列表请参考[这里](https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)。

## 使用场景

最常见的是对 Image 对象进行 Base-64 的编码解码。其次，我们也可以用于传输数据时的 Base-64 编码解码，比如浏览器地址栏中的参数可能在传输数据过程中出现的问题。

## 前置知识

- `window.btoa()`
- `window.atob()`

`window.btoa()` 从 `String` 对象中创建一个 Base-64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。`atob()` 方法可以将通过 `window.btoa()` 编码的字符串数据解码。

## 语法

```javascript 
// window.btoa()
const encodedData = window.btoa(stringToEncode); // 对数据进行编码
// window.atob()
const decodedData = window.atob(encodedData); // 对数据进行解码
```

### 参数

- `window.btoa(stringToEncode)`

`stringToEncode`：一个字符串，其字符分别表示要编码为 ASCII 的二进制数据的单个字节。

- `window.atob(encodedData)`

`encodedData`：一个 Base-64 表示的字符串。

### 返回值

- `window.btoa(stringToEncode)`

一个包含 `stringToEncode` 的 Base-64 表示的字符串。

- `window.atob(encodedData)`

对 Base-64 字符串解码后的 `String` 对象。

## Unicode 字符串

在多数浏览器中，使用 `btoa()` 对 Unicode 字符串进行编码都会触发 `InvalidCharacterError` 异常。可以考虑下面这个例子，代码来自[Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html)。

```javascript
// ucs-2 string to base64 encoded ascii
function utoa(str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}
// base64 encoded ascii to ucs-2 string
function atou(str) {
  return decodeURIComponent(escape(window.atob(str)));
}
// Usage:
utoa("✓ à la mode"); // 4pyTIMOgIGxhIG1vZGU=
atou("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode"

utoa("I \u2661 Unicode!"); // SSDimaEgVW5pY29kZSE=
atou("SSDimaEgVW5pY29kZSE="); // "I ♡ Unicode!"
```

## 参考

- [浏览器原生支持 JS Base64 编码解码](https://blog.csdn.net/sunwork888/article/details/89436947?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-6&spm=1001.2101.3001.4242)
- [WindowOrWorkerGlobalScope.btoa()](https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa)
- [WindowOrWorkerGlobalScope.atob()](https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob)

Last modification：August 15, 2024

如果觉得我的文章对你有用，请随意赞赏

2 comments

鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099
November 22nd, 2025 at 05:41 pm

《华纳圣淘沙公司开户流程全解析》→ 官方顾问一对一指导??? 安全联系：183第三段8890第四段9465
《华纳圣淘沙开户步骤详解》→ 」专属通道快速办理??? 安全联系：183第三段8890第四段9465
《华纳圣淘沙账户注册指南》→ 扫码获取完整资料清单?「微?? 安全联系：183第三段8890第四段9465
《新手开通华纳圣淘沙公司账户指南》→ 限时免费咨询开放??? 安全联系：183第三段8890第四段9465
《华纳圣淘沙企业开户标准流程》→ 资深顾问实时解答疑问??? 安全联系：183第三段8890第四段9465
《华纳圣淘沙开户步骤全景图》→ 点击获取极速开户方案??? 安全联系：183第三段8890第四段9465
《华纳圣淘沙账户创建全流程手册》→ 预约顾问免排队服务?9?? 安全联系：183第三段8890第四段9465 《从零开通华纳圣淘沙公司账户》→ 添加客服领取开户工具包?? 安全联系：183第三段8890第四段9465
《官方授权：华纳圣淘沙开户流程》→ 认证顾问全程代办?」?? 安全联系：183第三段8890第四段9465
《华纳圣淘沙开户说明书》→立即联系获取电子版文件??? 安全联系：183第三段8890第四段9465

Reply
鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099
November 20th, 2025 at 05:48 pm

华纳圣淘沙公司开户新手教程
零基础学会（183-8890-9465薇-STS5099）
华纳圣淘沙公司开户
华纳圣淘沙公司开户保姆级教程（183-8890-9465薇-STS5099）
一步步教你开通华纳圣淘沙公司账户（183-8890-9465薇-STS5099）
华纳圣淘沙公司开户分步图解
首次开户必看：（183-8890-9465薇-STS5099）
华纳圣淘沙全攻略
华纳圣淘沙公司开户实操手册（183-8890-9465薇-STS5099）
华纳圣淘沙开户流程视频教程
手把手教学：（183-8890-9465薇-STS5099）
华纳圣淘沙公司开户
华纳圣淘沙公司开户完全指南（183-8890-9465薇-STS5099）

Reply

JavaScript 实现 Base-64 编码解码

2 comments

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

推荐一款自用的梯子

JavaScript 根据 url 转换图像（base64）

MediaWiki 设置短链接（short url）

React必会：自定义Hook从入门到实战

prefers-color-scheme 设置、检测系统主题色

JsDoc vs TypeScript

TypeScript Utility Types - NonNullable: TypeScript 实用类型 - NonNullable

这篇文章，帮你深入理解React中的钩子函数useCallback

用 Github Actions 自动部署 Hexo 博客

反转字符串中的单词

JavaScript 实现 Base-64 编码解码

2 comments

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript 实现 Base-64 编码解码

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款