当前位置:首页 > JavaScript

btoa js实现

2026-02-02 10:52:38JavaScript

btoa 方法的 JavaScript 实现

btoa 是 JavaScript 中的一个全局方法,用于将二进制字符串(通常是 ASCII 字符串)编码为 Base64 格式。以下是其基本用法和实现细节。

基本语法

let encodedData = btoa(stringToEncode);

参数说明

  • stringToEncode:需要编码的二进制字符串(每个字符的 Unicode 值必须在 0 到 255 之间)。

返回值

返回一个 Base64 编码的字符串。

示例代码

const originalString = 'Hello, World!';
const encodedString = btoa(originalString);
console.log(encodedString); // 输出: "SGVsbG8sIFdvcmxkIQ=="

处理非 ASCII 字符

如果字符串包含非 ASCII 字符(Unicode 值大于 255),直接使用 btoa 会抛出错误。需要先对字符串进行转义或编码:

function encodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
        (match, p1) => String.fromCharCode('0x' + p1)));
}

const unicodeString = '你好,世界!';
const encodedUnicode = encodeUnicode(unicodeString);
console.log(encodedUnicode); // 输出 Base64 编码结果

手动实现 btoa

以下是一个手动实现 btoa 功能的函数:

btoa js实现

function customBtoa(str) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    let output = '';
    let i = 0;

    while (i < str.length) {
        const a = str.charCodeAt(i++);
        const b = str.charCodeAt(i++);
        const c = str.charCodeAt(i++);

        const byte1 = a >> 2;
        const byte2 = ((a & 3) << 4) | (b >> 4);
        const byte3 = ((b & 15) << 2) | (c >> 6);
        const byte4 = c & 63;

        output += chars.charAt(byte1) + chars.charAt(byte2);
        output += isNaN(b) ? '==' : isNaN(c) ? '=' : chars.charAt(byte3) + chars.charAt(byte4);
    }

    return output;
}

console.log(customBtoa('Hello')); // 输出: "SGVsbG8="

注意事项

  • btoa 仅适用于二进制字符串,对 Unicode 字符串需要额外处理。
  • 编码后的字符串可能包含 +/= 符号,用于填充或表示特殊字符。
  • 在 Node.js 环境中,可以使用 Buffer 实现类似功能:
    Buffer.from('Hello').toString('base64');

标签: btoajs
分享给朋友:

相关文章

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获取 jQ…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…