快捷導(dǎo)航

JavaScript將字符串轉(zhuǎn)為base64的五種方法

更新時(shí)間：2025年06月22日 12:01:12 作者：秀秀_heo

這篇文章主要介紹了JavaScript將字符串轉(zhuǎn)為Base64的五種方法：ASCII用btoa,非ASCII需UTF-8編碼（encodeURIComponent或TextEncoder）,Node.js用Buffer,URL安全需替換字符,第三方庫(kù)如js-base64提供更便捷功能,需要的朋友可以參考下

一、基礎(chǔ)方法（僅限 ASCII 字符）

若密碼僅包含 ASCII 字符（如英文、數(shù)字、常見(jiàn)符號(hào)），可直接使用原生函數(shù) btoa()：

const password = "MySecurePassword123!";
const base64Encoded = btoa(password); // 編碼
console.log(base64Encoded); // 輸出 "TXlTZWN1cmVQYXNzd29yZDEyMyE="

// 解碼驗(yàn)證
const original = atob(base64Encoded);
console.log(original); // 輸出原密碼

注意：直接使用 btoa 處理中文或特殊符號(hào)會(huì)報(bào)錯(cuò)。

二、處理非 ASCII 字符（推薦通用方案）

當(dāng)密碼包含中文、Emoji 等多字節(jié)字符時(shí)，需先進(jìn)行 UTF-8 編碼轉(zhuǎn)換：

方法 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 將字符轉(zhuǎn)為 UTF-8 字節(jié)序列，再通過(guò)正則替換為二進(jìn)制格式。

方法 2：TextEncoder API（現(xiàn)代瀏覽器）

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

優(yōu)勢(shì)：直接處理二進(jìn)制數(shù)據(jù)，無(wú)需手動(dòng)替換字符。

三、Node.js 環(huán)境實(shí)現(xiàn)

在 Node.js 中需使用 Buffer 對(duì)象：

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 默認(rèn)使用 UTF-8 編碼，可直接處理多字節(jié)字符。

四、URL 安全 Base64 格式

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

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

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

適用場(chǎng)景：URL 參數(shù)、文件名存儲(chǔ)等。

五、第三方庫(kù)（復(fù)雜場(chǎng)景推薦）

使用 js-base64 庫(kù)簡(jiǎn)化操作：

import Base64 from 'js-base64';

// 編碼（自動(dòng)處理 Unicode）
const base64Str = Base64.encode("密碼@安全!");
console.log(base64Str); // 輸出 "5a2g5YWDQOaUv+Wtpg=="

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

優(yōu)勢(shì)：支持 URL 安全模式、自動(dòng)填充等高級(jí)功能。

到此這篇關(guān)于JavaScript將字符串轉(zhuǎn)為base64的五種方法的文章就介紹到這了,更多相關(guān)JavaScript字符串轉(zhuǎn)base64內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: