JavaScript中window對象的函數btoa和atob

前言

atob和btoa是window對象的兩個函數，用來編碼解碼Base64。

有關Base64的編碼解碼規則可參考我的部落格：js實作基于Base64的編碼及解碼

btoa

binary to ascii，用于将binary資料用ascii碼表示。常用于編碼字元串。

var str = "This is a string";
var encoded_str = btoa(str);
console.log(encoded_str); // Outputs: "VGhpcyBpcyBhIHN0cmluZw=="
           

但是不能編碼Unicode字元

atob

ascii to binary，用于将ascii碼解析成binary資料。用于解碼Base64編碼的字元串。

var encoded_str = "VGhpcyBpcyBhIHN0cmluZw==";
var str= atob(encoded_str);
console.log(str); // Outputs: "This is a string"
           

如何讓btoa支援Unicode字元編碼

編碼時，先用encodeURIComponent對字元串進行編碼，再進行btoa進行Base64編碼

解碼時，先用atob對Base64編碼的串進行解碼，再用decodeURIComponent對字元串進行解碼

var str = "hello,中國";
var encoded_str = btoa(encodeURIComponent(str));
var decoded_str = decodeURIComponent(atob(encoded_str));
console.log(encoded_str); // Outputs: "aGVsbG8lMkMlRTQlQjglQUQlRTUlOUIlQkQ="
console.log(decoded_str); // Outputs: "hello,中國"
           

IE9不支援atob、btoa

對于IE9不支援這兩種編碼解碼方式，可以使用公共類庫來相容IE9：

具體可檢視我的部落格：

js實作基于Base64的編碼及解碼