在 JavaScript 中將字串編碼和解碼為 Base64

Base64 編碼字符集由 A-Za-z0-9+/ 組成。該系統總共有 64 個字元,因此稱為 Base64。Base64 編碼將資料轉換為 ASCII(美國資訊交換標準程式碼)格式。

例如,如果你有一個字串 Git,那麼在 Base64 編碼格式中,該字串將表示為 R29vZ2xl

這裡剛剛發生的是,字串的各個字元首先被表示為它們的 ASCII 值,即對於大寫的 G,其 ASCII 值是 71,對於小的 i,其 ASCII 值是 105,並且其他角色也類似。要獲取 ASCII 值的完整列表,請訪問此連結

然後將這些 ASCII 值轉換為 8 位二進位制表示。這個 8 位二進位制表示然後被分成四個 6 位段。然後將這四個二進位制段轉換為十進位制。

JavaScript base64 編碼

最後,這些十進位制數字被按照 Base64 編碼表轉換為 Base64。

現在我們不必手動完成所有這些轉換。到目前為止,我們所看到的只是為了理解目的。讓我們看看如何將字串編碼和解碼為 Base64。

在 JavaScript 中將字串編碼和解碼為 Base64

在 JavaScript 中,我們有兩個 Base64 輔助函式,btoa()atob(),用於將字串轉換為 Base64 編碼,反之亦然。btoa() 接受一個字串並將其編碼為 Base64,而 atob() 接受一個編碼字串並對其進行解碼。

在下面的程式碼中,我們有兩個 div 元素,我們將在其中顯示編碼和解碼的字串。我們使用 JavaScript 中的 getElementById() 方法將這兩個 div 的引用儲存在 myDiv_1myDiv_2 中。我們將在本例中編碼和解碼的字串是儲存在 str 變數中的 Git

為了編碼這個字串,我們將使用 btoa() 函式。為此,只需將 str 變數作為引數傳遞給該函式。我們將把這個結果儲存在 encodedStr 變數中。然後我們將使用 myDiv_1.innerHTML 屬性在 div_1 中顯示此變數的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>

  <div id="div_1"></div>
  <div id="div_2"></div>
  
  <script>
      let myDiv_1 = document.getElementById('div_1');
      let myDiv_2 = document.getElementById('div_2');
      
      let str = "Git";
      let encodedStr = btoa(str);
      myDiv_1.innerHTML = encodedStr;
  </script>
</body>
</html>

輸出:

R2l0

這就是你將獲得的輸出。該字串未轉換為 Base64。

現在要將上述字串解碼為原始形式,你可以使用 atob() 函式並在其中傳遞 encodedStr。然後使用 myDiv_2.innerHTML 屬性在 div_2 中顯示 decodedStr 變數的值。

let decodedStr = atob(encodedStr);
myDiv_2.innerHTML = decodedStr;

輸出:

Git

請注意,Base64 用於傳送二進位制資料,而不是一種加密方法。此外,它不是一種壓縮方法。

相關文章 - JavaScript Encoding

  • JavaScript 中的 URL 編碼