快捷導(dǎo)航

JavaScript中btoa和atob全局函數(shù)示例詳解

更新時(shí)間：2024年08月19日 09:29:06 作者：涼生阿新

這篇文章主要給大家介紹了關(guān)于JavaScript中btoa和atob全局函數(shù)的相關(guān)資料,atob和btoa是window對(duì)象的兩個(gè)函數(shù),用來(lái)編碼解碼Base64,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在 JavaScript 中，btoa 和 atob 是兩個(gè)處理 Base64 編碼的全局函數(shù)，它們通常用于在瀏覽器環(huán)境中對(duì)二進(jìn)制數(shù)據(jù)進(jìn)行編碼和解碼。

不過(guò)，需要注意的是，這兩個(gè)函數(shù)并非 JavaScript 標(biāo)準(zhǔn)規(guī)范（ECMAScript）的一部分，而是瀏覽器環(huán)境（如 Web API）提供的。

一、btoa()

btoa() 函數(shù)用于將二進(jìn)制數(shù)據(jù)編碼為 Base64 格式的 ASCII 字符串。它接受一個(gè) DOMString（即，一個(gè) UTF-8 格式的字符串）作為參數(shù)，并返回一個(gè)包含原始數(shù)據(jù)的 Base64 編碼的 ASCII 字符串。

const binaryString = "Hello, World!";  
const base64String = btoa(binaryString);  
console.log(base64String); // 輸出：SGVsbG8sIFdvcmxkIQ==

PS：btoa() 只能對(duì) ASCII 字符串進(jìn)行編碼，因此如果你嘗試對(duì)非 ASCII 字符串（如包含中文字符的字符串）進(jìn)行編碼，可能會(huì)得到意外的結(jié)果或拋出錯(cuò)誤。

二、atob()

atob() 函數(shù)用于解碼通過(guò) btoa() 編碼的 Base64 字符串。它接受一個(gè)包含 Base64 編碼數(shù)據(jù)的 ASCII 字符串作為參數(shù)，并返回一個(gè)包含原始數(shù)據(jù)的 DOMString。如果字符串不是一個(gè)有效的 Base64 編碼，則會(huì)拋出一個(gè)錯(cuò)誤。

const base64String = "SGVsbG8sIFdvcmxkIQ==";  
const decodedString = atob(base64String);  
console.log(decodedString); // 輸出：Hello, World!

在使用 btoa() 和 atob() 時(shí)，請(qǐng)確保你的代碼運(yùn)行在支持這些函數(shù)的環(huán)境中（如瀏覽器）。如果你正在編寫跨平臺(tái)或服務(wù)器端 JavaScript 代碼，可能需要使用其他庫(kù)（如 Node.js 中的 Buffer 類）來(lái)處理 Base64 編碼和解碼。

三、優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

方便性：它提供了一種簡(jiǎn)單的方法來(lái)將二進(jìn)制數(shù)據(jù)（如字符串、Blob、ArrayBuffer 等）轉(zhuǎn)換為 Base64
編碼的字符串，以便在網(wǎng)絡(luò)中傳輸或在瀏覽器中存儲(chǔ)。兼容性：在現(xiàn)代瀏覽器中，btoa 函數(shù)的兼容性相對(duì)較好。

缺點(diǎn)：

輸入限制：btoa 只能接受 UTF-8 編碼的字符串作為輸入。如果你嘗試使用其他編碼的字符串或二進(jìn)制數(shù)據(jù)（如
ArrayBuffer），你需要先將其轉(zhuǎn)換為 UTF-8 編碼的字符串。不支持二進(jìn)制 Blob 或
ArrayBuffer：雖然可以使用一些技巧（如 FileReader API）將 Blob 或 ArrayBuffer 轉(zhuǎn)換為
Base64 字符串，但 btoa 本身并不直接支持這些類型。安全性：Base64
編碼不是一種加密方法，因此它不會(huì)增加數(shù)據(jù)的安全性。它只是將數(shù)據(jù)轉(zhuǎn)換為一種可在文本中安全傳輸?shù)母袷健?/li>

使用場(chǎng)景

數(shù)據(jù)傳輸：在不支持二進(jìn)制的上下文中，如 HTTP 請(qǐng)求的 URL 或 JSON 格式，可以使用 Base64 編碼傳輸二進(jìn)制數(shù)據(jù)。
圖片數(shù)據(jù)：在 Web 頁(yè)面中，可以通過(guò) Base64 編碼直接在 HTML中嵌入圖片，而不需要使用<img>標(biāo)簽的src屬性指向一個(gè)外部圖片文件

注意事項(xiàng)

btoa和atob只能處理「純文本數(shù)據(jù)」，不能用于編碼二進(jìn)制數(shù)據(jù)。編碼后的 Base64 字符串大小會(huì)比原始數(shù)據(jù)大約 33%。
btoa和atob是 Web 瀏覽器提供的函數(shù)，不是 ECMAScript 標(biāo)準(zhǔn)的一部分，因此在非瀏覽器環(huán)境中（如
Node.js）不可用。

附：JS中 atob 方法解碼中文字符亂碼問(wèn)題

注：非中文的話直接用 btoa 和 atob 就行了

// 中文 base64 編碼
function utf8_to_b64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}


// 中文 base64 解碼
function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}