当前位置:首页 > JavaScript

js实现base 64

2026-03-15 13:46:05JavaScript

Base64 编码与解码的实现

在 JavaScript 中,可以通过内置的 btoa()atob() 函数实现 Base64 的编码与解码。btoa() 用于将字符串编码为 Base64,atob() 用于将 Base64 字符串解码为原始内容。

编码字符串为 Base64

使用 btoa() 函数对字符串进行 Base64 编码:

const originalString = 'Hello, World!';
const encodedString = btoa(originalString);
console.log(encodedString); // 输出 "SGVsbG8sIFdvcmxkIQ=="

解码 Base64 字符串

使用 atob() 函数将 Base64 字符串解码为原始内容:

const encodedString = 'SGVsbG8sIFdvcmxkIQ==';
const decodedString = atob(encodedString);
console.log(decodedString); // 输出 "Hello, World!"

处理 Unicode 字符

btoa()atob() 仅支持 ASCII 字符。如果字符串包含 Unicode 字符(如中文、表情符号等),需先进行转义处理:

// 编码 Unicode 字符串
function encodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
        return String.fromCharCode('0x' + p1);
    }));
}

// 解码 Unicode 字符串
function decodeUnicode(str) {
    return decodeURIComponent(atob(str).split('').map(c => {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

const unicodeString = '你好,世界!';
const encodedUnicode = encodeUnicode(unicodeString);
console.log(encodedUnicode); // 输出编码后的 Base64 字符串

const decodedUnicode = decodeUnicode(encodedUnicode);
console.log(decodedUnicode); // 输出 "你好,世界!"

Node.js 环境中的实现

在 Node.js 中,可以使用 Buffer 实现 Base64 编码与解码:

// 编码为 Base64
const originalData = 'Hello, Node.js!';
const encodedData = Buffer.from(originalData).toString('base64');
console.log(encodedData); // 输出 "SGVsbG8sIE5vZGUuanMh"

// 解码 Base64
const decodedData = Buffer.from(encodedData, 'base64').toString();
console.log(decodedData); // 输出 "Hello, Node.js!"

二进制数据的 Base64 处理

若需处理二进制数据(如文件),可通过 FileReader(浏览器)或 Buffer(Node.js)实现:

浏览器环境:

// 读取文件并编码为 Base64
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
        const base64String = event.target.result.split(',')[1];
        console.log(base64String); // 输出文件的 Base64 编码
    };
    reader.readAsDataURL(file);
});

Node.js 环境:

js实现base 64

const fs = require('fs');
const fileData = fs.readFileSync('example.jpg');
const base64Data = fileData.toString('base64');
console.log(base64Data); // 输出文件的 Base64 编码

以上方法覆盖了常见场景下的 Base64 编码与解码需求,包括字符串、Unicode 字符及二进制数据的处理。

标签: jsbase
分享给朋友:

相关文章

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…