js base64

js base64

Base64 是一种用于将二进制数据编码为 ASCII 字符的编码方式。在 Web 开发中，经常会遇到需要进行 Base64 编码和解码的场景，比如在文件上传和下载、数据传输等方面。JavaScript 提供了多种方式来实现 Base64 编码和解码操作。本文将详细介绍 JavaScript 中的 Base64 编码和解码方法，包括手动实现和使用第三方库。

什么是 Base64 编码

在计算机中，数据通常以二进制格式存储和传输。而二进制数据并不适合直接在文本环境中显示和传输，因为文本环境一般只支持 ASCII 字符集。为了解决这个问题，Base64 编码应运而生。Base64 编码将二进制数据转换为包含 ASCII 字符的字符串，使得数据能够在文本环境中进行传输和显示。

Base64 编码的原理比较简单，它将每 3 个字节的数据编码成 4 个 ASCII 字符。编码的过程是将 3 个字节的数据划分为 4 个 6 位的块，然后将这些 6 位的数值映射为相应的 ASCII 字符。如果数据不足 3 个字节，需要进行补齐操作。Base64 编码表如下：

JavaScript 中的 Base64 编码

js base64概述

在 JavaScript 中，常见的 Base64 编码方式有两种：手动实现和使用第三方库。手动实现方式需要我们编写代码来完成 Base64 编码和解码的逻辑，而使用第三方库可以大大简化开发过程。

手动实现js Base64 编码

下面是一种手动实现 Base64 编码的方法：

function base64Encode(str) {
  const base64Chars =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

  let result = '';
  let padding = 0;
  let paddingChar = '=';

  for (let i = 0; i < str.length; i += 3) {
    const char1 = str.charCodeAt(i);
    const char2 = str.charCodeAt(i + 1);
    const char3 = str.charCodeAt(i + 2);

    const block = (char1 << 16) | (char2 << 8) | char3;

    const b1 = (block & 0xfc0000) >> 18;
    const b2 = (block & 0x3f000) >> 12;
    const b3 = (block & 0xfc0) >> 6;
    const b4 = block & 0x3f;

    result +=
      base64Chars[b1] + base64Chars[b2] + base64Chars[b3] + base64Chars[b4];
  }

  padding = str.length % 3;
  if (padding === 1) {
    paddingChar = '==';
  } else if (padding === 2) {
    paddingChar = '=';
  }

  return result.slice(0, result.length - padding) + paddingChar;
}

这段代码实现了一个名为 base64Encode 的函数，它接收一个字符串作为参数，并返回对应的 Base64 编码字符串。这个函数将输入字符串按照每 3 个字符进行划分，然后对每个 3 字符的块进行编码。最后，根据输入字符串长度进行补齐操作。

下面是一个使用 base64Encode 函数的示例：

const input = 'Hello, World!';
const encoded = base64Encode(input);
console.log(encoded);

输出结果：

使用第三方库进行js Base64 编码

除了手动实现外，我们还可以使用第三方库来进行 Base64 编码操作。其中，btoa 和 Buffer.from 是两个常用的方法。

btoa 方法是 Web API 提供的全局函数，用于将二进制数据编码成 Base64 字符串。它接收一个 ASCII 字符串作为参数，返回对应的 Base64 编码字符串。

下面是一个使用 btoa 方法进行 Base64 编码的示例：

const input = 'Hello, World!';
const encoded = btoa(input);
console.log(encoded);

输出结果：

SGVsbG8sIFdvcmxkIQ==

Buffer.from 方法是 Node.js 提供的用于创建 Buffer 对象的方法。我们可以使用它来将字符串或二进制数据编码成 Base64 字符串。它接收一个字符串或 Buffer 对象作为参数，然后返回对应的 Base64 编码字符串。

下面是一个使用 Buffer.from 方法进行 Base64 编码的示例：

const input = 'Hello, World!';
const buffer = Buffer.from(input);
const encoded = buffer.toString('base64');
console.log(encoded);

输出结果：

SGVsbG8sIFdvcmxkIQ==

JavaScript 中的 Base64 解码

js base64概述

除了编码，JavaScript 也提供了多种方式来进行 Base64 解码操作。与编码类似，解码也可以通过手动实现或使用第三方库的方式来实现。

手动实现js Base64 解码

下面是一种手动实现 Base64 解码的方法：

function base64Decode(str) {
  const base64Chars =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

  let result = '';
  let padding = 0;

  for (let i = 0; i < str.length; i += 4) {
    const b1 = base64Chars.indexOf(str[i]);
    const b2 = base64Chars.indexOf(str[i + 1]);
    const b3 = base64Chars.indexOf(str[i + 2]);
    const b4 = base64Chars.indexOf(str[i + 3]);

    const block = (b1 << 18) | (b2 << 12) | (b3 << 6) | b4;

    const char1 = (block & 0xff0000) >> 16;
    const char2 = (block & 0xff00) >> 8;
    const char3 = block & 0xff;

    result += String.fromCharCode(char1, char2, char3);
  }

  padding = str.endsWith('==') ? 2 : str.endsWith('=') ? 1 : 0;

  return result.slice(0, result.length - padding);
}

这段代码实现了一个名为 base64Decode 的函数，它接收一个 Base64 编码的字符串作为参数，并返回对应的解码后的字符串。这个函数将输入字符串按照每 4 个字符进行划分，然后对每个 4 字符的块进行解码。最后，根据输入字符串的最后两位或一位进行判断并去除补位操作。

下面是一个使用 base64Decode 函数进行 Base64 解码的示例：

const encoded = 'SGVsbG8sIFdvcmxkIQ==';
const decoded = base64Decode(encoded);
console.log(decoded);

输出结果：

使用第三方库进行js Base64 解码

除了手动实现，我们也可以使用第三方库来进行 Base64 解码。其中，atob 和 Buffer.from 是两个常用的方法。

atob 方法是 Web API 提供的全局函数，用于将 Base64 编码字符串解码成原始 ASCII 字符串。它接收一个 Base64 编码字符串作为参数，返回对应的解码后的字符串。

下面是一个使用 atob 方法进行 Base64 解码的示例：

const encoded = 'SGVsbG8sIFdvcmxkIQ==';
const decoded = atob(encoded);
console.log(decoded);

输出结果：

Hello, World!

Buffer.from 方法同样适用于进行 Base64 解码操作。我们可以使用它来将 Base64 编码字符串解码为原始数据。它接收一个 Base64 编码字符串作为参数，然后返回对应的 Buffer 对象。

下面是一个使用 Buffer.from 方法进行 Base64 解码的示例：

const encoded = 'SGVsbG8sIFdvcmxkIQ==';
const buffer = Buffer.from(encoded, 'base64');
const decoded = buffer.toString();
console.log(decoded);

输出结果：

Hello, World!

js base64总结

Base64 编码是将二进制数据转换为 ASCII 字符的常用编码方式。在 JavaScript 中，我们可以通过手动实现或使用第三方库的方式来进行 Base64 编码和解码操作。手动实现需要编写相应的代码，但可以更好地理解 Base64 编码的原理。使用第三方库则可以简化开发过程，提高效率。无论采用哪种方式，掌握 Base64 编码和解码的方法对于 Web 开发是非常重要的。