前言

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

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

一、btoa()

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

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

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

二、atob()

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

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

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

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

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

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

缺點(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
• 編碼不是一種加密方法，因此它不會增加數(shù)據(jù)的安全性。它只是將數(shù)據(jù)轉(zhuǎn)換為一種可在文本中安全傳輸?shù)母袷健?/li>

使用場景

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

注意事項

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

附：JS中 atob 方法解碼中文字符亂碼問題

注：非中文的話直接用 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)));
}

總結(jié) 

到此這篇關(guān)于JavaScript中btoa和atob全局函數(shù)的文章就介紹到這了,更多相關(guān)Js的btoa和atob全局函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論