JavaScript将字符串转为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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
big.js与bignumber.js的差异、统一配置与避坑技巧完全指南
big.js是一个小巧、快速且易于使用的JavaScript库,专门用于任意精度的十进制算术运算,这篇文章主要介绍了big.js与bignumber.js的差异、统一配置与避坑技巧完全指南,需要的朋友可以参考下2026-01-01
原生Javascript/原生JS修改CSS样式的4种方式简单示例
在网页开发中我们经常会用到JavaScript来操作网页元素,其中一个常见的操作就是修改元素的CSS样式,下面这篇文章主要给大家介绍了关于原生Javascript/原生JS修改CSS样式的4种方式,需要的朋友可以参考下2024-03-03
详解extract-text-webpack-plugin 的使用及安装
这篇文章主要介绍了详解extract-text-webpack-plugin 的使用及安装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-06-06


最新评论