当前位置:首页 > JavaScript

js atob实现

2026-02-01 13:47:58JavaScript

atob 函数的基本用法

atob 是 JavaScript 中的一个全局函数,用于解码 Base64 编码的字符串。它接受一个 Base64 编码的字符串作为参数,返回解码后的原始字符串。

const encodedStr = 'SGVsbG8gV29ybGQh'; // Base64 编码的 "Hello World!"
const decodedStr = atob(encodedStr);
console.log(decodedStr); // 输出: "Hello World!"

处理非 ASCII 字符

atobbtoa 在处理非 ASCII 字符时可能会出现问题。为了解决这个问题,可以使用 encodeURIComponentdecodeURIComponent 进行转义。

const originalStr = '你好,世界!';
const encodedStr = btoa(encodeURIComponent(originalStr));
const decodedStr = decodeURIComponent(atob(encodedStr));
console.log(decodedStr); // 输出: "你好,世界!"

替代方案:Buffer(Node.js 环境)

在 Node.js 环境中,可以使用 Buffer 类来实现 Base64 编解码。

const encodedStr = Buffer.from('Hello World!', 'utf8').toString('base64');
console.log(encodedStr); // 输出: "SGVsbG8gV29ybGQh"

const decodedStr = Buffer.from(encodedStr, 'base64').toString('utf8');
console.log(decodedStr); // 输出: "Hello World!"

替代方案:TextEncoder 和 TextDecoder(浏览器环境)

现代浏览器支持 TextEncoderTextDecoder API,可以用于处理 Base64 编解码。

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const originalStr = 'Hello World!';
const encodedStr = btoa(String.fromCharCode(...encoder.encode(originalStr)));
console.log(encodedStr); // 输出: "SGVsbG8gV29ybGQh"

const decodedStr = decoder.decode(new Uint8Array([...atob(encodedStr)].map(c => c.charCodeAt(0))));
console.log(decodedStr); // 输出: "Hello World!"

注意事项

atobbtoa 是浏览器环境中的全局函数,但在 Node.js 中不可用。在 Node.js 中需要使用 Buffer 或其他替代方案。

js atob实现

Base64 编码会增加数据大小约 33%,因此不适合用于大量数据的编码。

标签: jsatob
分享给朋友:

相关文章

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js怎么实现异步

js怎么实现异步

异步实现方法 JavaScript中实现异步操作主要通过以下几种方式: Promise Promise是ES6引入的异步解决方案,用于处理异步操作的成功或失败状态。 const promise =…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…