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

 更新时间:2025年06月22日 12:01:12   作者:秀秀_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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于js文件加载优化(详解)

    基于js文件加载优化(详解)

    下面小编就为大家分享一篇基于js文件加载优化(详解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • big.js与bignumber.js的差异、统一配置与避坑技巧完全指南

    big.js与bignumber.js的差异、统一配置与避坑技巧完全指南

    big.js是一个小巧、快速且易于使用的JavaScript库,专门用于任意精度的十进制算术运算,这篇文章主要介绍了big.js与bignumber.js的差异、统一配置与避坑技巧完全指南,需要的朋友可以参考下
    2026-01-01
  • 原生Javascript/原生JS修改CSS样式的4种方式简单示例

    原生Javascript/原生JS修改CSS样式的4种方式简单示例

    在网页开发中我们经常会用到JavaScript来操作网页元素,其中一个常见的操作就是修改元素的CSS样式,下面这篇文章主要给大家介绍了关于原生Javascript/原生JS修改CSS样式的4种方式,需要的朋友可以参考下
    2024-03-03
  • js定时器(执行一次、重复执行)

    js定时器(执行一次、重复执行)

    这篇文章主要分享一段js代码,有关js定时器的小例子,分为执行一次的定时器与重复执行的定时器,需要的朋友可以参考下
    2014-03-03
  • JS监听组合按键思路及实现过程

    JS监听组合按键思路及实现过程

    这篇文章主要介绍了JS监听组合按键思路及实现过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • 使用正则替换变量

    使用正则替换变量

    使用正则替换变量...
    2007-05-05
  • 详解extract-text-webpack-plugin 的使用及安装

    详解extract-text-webpack-plugin 的使用及安装

    这篇文章主要介绍了详解extract-text-webpack-plugin 的使用及安装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • js调用AJAX时Get和post的乱码解决方法

    js调用AJAX时Get和post的乱码解决方法

    在使用"get"时,抓取的页面最后加上编码类型,在使用post时用vbscript解决了编码问题,具体实现如下,有类似情况的朋友可以参考下哈
    2013-06-06
  • H5上传本地图片并预览功能

    H5上传本地图片并预览功能

    这篇文章主要为大家详细介绍了H5上传本地图片并预览的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • alert中断settimeout计时功能

    alert中断settimeout计时功能

    在测试过程中发现alert会中断settimeout的计时功能,关闭对话框后,settimeout的时间会重头开始计时,而不是从中断处,感兴趣的朋友可以了解下
    2013-07-07

最新评论