首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript字符串转base64

JavaScript将字符串转为base64的五种方法

2025-06-22 12:01:13 作者：秀秀_heo

这篇文章主要介绍了JavaScript将字符串转为Base64的五种方法：ASCII用btoa,非ASCII需UTF-8编码（encodeURIComponent或TextEncoder）,Node.js用Buffer,URL安全需替换字符,第三方库如js-base64提供更便捷功能,需要的朋友可以参考下

一、基础方法（仅限 ASCII 字符）

若密码仅包含 ASCII 字符（如英文、数字、常见符号），可直接使用原生函数 btoa()：

const password = "MySecurePassword123!";
const base64Encoded = btoa(password); // 编码
console.log(base64Encoded); // 输出 "TXlTZWN1cmVQYXNzd29yZDEyMyE="

// 解码验证
const original = atob(base64Encoded);
console.log(original); // 输出原密码

注意：直接使用 btoa 处理中文或特殊符号会报错。

二、处理非 ASCII 字符（推荐通用方案）

当密码包含中文、Emoji 等多字节字符时，需先进行 UTF-8 编码转换：

方法 1：encodeURIComponent + btoa

function encodeToBase64(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
        (match, p1) => String.fromCharCode(parseInt(p1, 16)))
    );
}

const password = "密码@安全!";
const base64Str = encodeToBase64(password); // 编码
console.log(base64Str); // 输出 "JUU1JUI4JUEzJUU3JUEwJTgxJUU1JUFFJTg4JUU1JTg1JUE4IQ=="

// 解码
function decodeFromBase64(str) {
    return decodeURIComponent(atob(str).split('').map(c => 
        '%' + c.charCodeAt(0).toString(16).padStart(2, '0')
    ).join(''));
}
console.log(decodeFromBase64(base64Str)); // 输出原密码

原理：encodeURIComponent 将字符转为 UTF-8 字节序列，再通过正则替换为二进制格式。

方法 2：TextEncoder API（现代浏览器）

const password = "密码@安全!";
const encoder = new TextEncoder();
const data = encoder.encode(password);
const base64Str = btoa(String.fromCharCode(...data));
console.log(base64Str); // 输出 "5a2g5YWDQOaUv+Wtpg=="

优势：直接处理二进制数据，无需手动替换字符。

三、Node.js 环境实现

在 Node.js 中需使用 Buffer 对象：

const password = "密码@安全!";
const base64Str = Buffer.from(password).toString('base64'); // 编码
console.log(base64Str); // 输出 "5a2g5YWDQOaUv+Wtpg=="

// 解码
const decoded = Buffer.from(base64Str, 'base64').toString('utf8');
console.log(decoded); // 输出原密码

注意：Buffer 默认使用 UTF-8 编码，可直接处理多字节字符。

四、URL 安全 Base64 格式

若需在 URL 中使用 Base64，需替换特殊字符：

function toUrlSafeBase64(str) {
    return btoa(str)
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=+$/, ''); // 去除填充符
}

const safeBase64 = toUrlSafeBase64("password#secure!");
console.log(safeBase64); // 输出 "cGFzc3dvcmQjc2VjdXJlIQ"

适用场景：URL 参数、文件名存储等。

五、第三方库（复杂场景推荐）

使用 js-base64 库简化操作：

import Base64 from 'js-base64';

// 编码（自动处理 Unicode）
const base64Str = Base64.encode("密码@安全!");
console.log(base64Str); // 输出 "5a2g5YWDQOaUv+Wtpg=="

// 解码
const original = Base64.decode(base64Str);
console.log(original); // 输出原密码

优势：支持 URL 安全模式、自动填充等高级功能。

到此这篇关于JavaScript将字符串转为base64的五种方法的文章就介绍到这了,更多相关JavaScript字符串转base64内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！