跳至主要内容

如何使用 javascript 對文字進行 Base64 Encode 編碼 和 Decode 解碼

· 2 分鐘閱讀
Eric Cheng

之前的需求要將文字用 Base64 編碼和解碼，簡單的做了些筆記

瀏覽器原生支援​

瀏覽器原生提供兩個 JavaScript 函數來解碼和編碼 Base64 文字

btoa (binary to ASCII)：將二進制數據字串轉換為Base64編碼的ASCII字串 atob (ASCII to binary)：解碼Base64編碼的字串

測試了一下

let txt = "havocFuture";
let en = window.btoa(txt);
console.log(en);    // aGF2b2NGdXR1cmU=
let de = window.atob(en);
console.log(de);    // havocFuture

看起來是沒有問題，編碼後格式是正確的，也可以成功的解碼

但是把要編碼的文字改成中文字重新執行就會出現錯誤訊息如下

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

google 了一下，似乎這個 function 並不支援 UTF-8 文字的編碼

第三方 Lib 套件：js-base64​

找到一個第三方 Lib 套件

Github：https://github.com/dankogai/js-base64

如果使用的是 npm 的話，先需要 install

$ npm install js-base64

使用上很簡單，直接寫程式碼

import { Base64 } from 'js-base64';

let txt = "老哈的隨手技術筆記";
let en = Base64.encode(txt);
console.log(en);    // 6ICB5ZOI55qE6Zqo5omL5oqA6KGT562G6KiY 
let de = Base64.decode(en);
console.log(de);    // 老哈的隨手技術筆記

測試剛才用 btoa / atob 會報錯的中文文字，改用 js-base64 就可以順利編碼和解碼了

實作 Base64 Encode 編碼 和 Decode 解碼​

就直接實作了兩個頁面

Base64 Encode(編碼)
Base64 Decode(解碼)

歡迎使用及分享… XD


分享

版權聲明

，轉載請註明出處
本文連結: https://tech.havocfuture.tw/blog/js-base64-encode-decode



這是 google 廣告