前言

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

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

一、btoa()

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

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

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

二、atob()

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

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

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

三、優(yōu)缺點

優(yōu)點：

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

缺點：

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

使用場景

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

注意事項

• btoa和atob只能處理「純文本數據」，不能用于編碼二進制數據。 編碼后的 Base64 字符串大小會比原始數據大約 33%。
• btoa和atob是 Web 瀏覽器提供的函數，不是 ECMAScript 標準的一部分，因此在非瀏覽器環(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)));
}

總結 

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

最新評論