JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)

下面是详细的讲解。

概述

在前端开发中，我们经常需要对数据进行加密传输或者解密处理，其中Base64编码算法是一种经常被使用的编码方式。本文将讲解如何使用JavaScript实现Base64编解码的实现方法，并附带实例代码。

Base64编码原理

Base64是一种常用的编码算法，可以将数据进行编码，常用于传输数据或者在文本中嵌入非ASCII字符。Base64将3个长度不等的字节编码成4个字节的编码，编码后的数据长度会增加1/3左右。

Base64编码需要将原始数据使用64种字符进行重新编码，包括A到Z、a到z、0到9，以及"+/"。原始数据格式如下：

ABCD1234

Base64编码后的格式如下：

QUJDRAoxMjM0

Base64编码实现

下面是JavaScript实现Base64编码的代码：

function base64Encode(str) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    str = utf8Encode(str);
    while (i < str.length) {
        chr1 = str.charCodeAt(i++);
        chr2 = str.charCodeAt(i++);
        chr3 = str.charCodeAt(i++);
        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;
        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output = output +
            keyStr.charAt(enc1) + keyStr.charAt(enc2) +
            keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}

function utf8Encode(string) {
    string = string.replace(/\r\n/g,"\n");
    var utftext = "";
    for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
            utftext += String.fromCharCode(c);
        } else if ((c > 127) && (c < 2048)) {
            utftext += String.fromCharCode((c >> 6) | 192);
            utftext += String.fromCharCode((c & 63) | 128);
        } else {
            utftext += String.fromCharCode((c >> 12) | 224);
            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
            utftext += String.fromCharCode((c & 63) | 128);
        }
    }
    return utftext;
}

Base64解码实现

下面是JavaScript实现Base64解码的代码：

function base64Decode(str) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    str = str.replace(/[^A-Za-z0-9\+\/\=]/g, "");
    while (i < str.length) {
        enc1 = keyStr.indexOf(str.charAt(i++));
        enc2 = keyStr.indexOf(str.charAt(i++));
        enc3 = keyStr.indexOf(str.charAt(i++));
        enc4 = keyStr.indexOf(str.charAt(i++));
        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;
        output = output + String.fromCharCode(chr1);
        if (enc3 != 64) {
            output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
            output = output + String.fromCharCode(chr3);
        }
    }
    output = utf8Decode(output);
    return output;
}

function utf8Decode(utftext) {
    var string = "";
    var i = 0;
    var c = c1 = c2 = 0;
    while (i < utftext.length) {
        c = utftext.charCodeAt(i);
        if (c < 128) {
            string += String.fromCharCode(c);
            i++;
        } else if ((c > 191) && (c < 224)) {
            c2 = utftext.charCodeAt(i + 1);
            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
            i += 2;
        } else {
            c2 = utftext.charCodeAt(i + 1);
            c3 = utftext.charCodeAt(i + 2);
            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
        }
    }
    return string;
}

示例一

以下是将字符串“hello world”进行编码的示例：

var str = "hello world";
var encodedStr = base64Encode(str);
console.log(encodedStr); // 输出 aGVsbG8gd29ybGQ=

示例二

以下是将字符串“aGVsbG8gd29ybGQ=”进行解码的示例：

var str = "aGVsbG8gd29ybGQ=";
var decodedStr = base64Decode(str);
console.log(decodedStr); // 输出 hello world

总结

本文详细讲解了如何使用JavaScript实现Base64编解码，同时给出了两个实例，希望读者可以从中学习到实现的方法和技巧。