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

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

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

一、基礎方法（僅限 ASCII 字符）

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

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

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

注意：直接使用 btoa 處理中文或特殊符號會報錯。

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

當密碼包含中文、Emoji 等多字節(jié)字符時，需先進行 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é)序列，再通過正則替換為二進制格式。

方法 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ù)，無需手動替換字符。

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

在 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 編碼，可直接處理多字節(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"

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

五、第三方庫（復雜場景推薦）

使用 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); // 輸出原密碼

優(yōu)勢：支持 URL 安全模式、自動填充等高級功能。

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

您可能感興趣的文章: