js Base64转码

最新推荐文章于 2025-06-11 15:08:45 发布

原创最新推荐文章于 2025-06-11 15:08:45 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍Base64编码的基本原理及其在JavaScript中的应用。详细讲述了如何处理包含非ASCII码字符的情况，并提供了一段封装好的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Base64是一种编码方法，可以将任意字符转成可打印字符。使用这种编码方法，主要不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript原生提供两个Base64相关方法。

btoa(); //字符串或二进制值转为Base64编码
atob(); //Base64编码转为原始值

下面是一个对特殊字符串的处理

<script type="text/javascript">
    var str = "hello\World" //这个字符串包含“\”,斜杠是一个特殊字符
    var str1 = btoa(str); // 转成base64
    console.log(str1);   //aGVsbG9Xb3JsZA==
    var str2 = atob(str1); //把base64转为原始字符串
    console.log(str2);  //helloWorld
</script>

但是这来个方法也有一个缺陷，它们不适合非ASCII码的字符，否者会报如下的这个错误。

<script type="text/javascript">
    var str = "你好" 
    var str1 = btoa(str); 
    console.log(str1);  //Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range
</script>

要将非ASCII码字符转为Base64编码，必须中间插入一个转码环节，要配合使用以下这两个方法。

encodeURIComponent();
decodeURIComponent();

下面是示例：

<script type="text/javascript">
    var str = "你好";
    var encode = encodeURIComponent(str);
    var str1 = btoa(encode); 
    console.log(str1); //JUU0JUJEJUEwJUU1JUE1JUJE

    var decode = decodeURIComponent(atob(str1));
    console.log(decode); //你好
</script>

综合以上内容，下面我们把这四个函数做一个简单的分装，可以使我们在开发中更为方便引用。

<script type="text/javascript">
    var base64 = { //这是一个javaScript的对象

          encode(str){

            return  str == null ? null : btoa(encodeURIComponent(str));

          },

          decode(str){

              return str == null ? null : decodeURIComponent(atob(str));

          }

        };
        console.log(base64.encode('你好'));//JUU0JUJEJUEwJUU1JUE1JUJE
</script>

本文参考至阮一峰老师的javaScript教程，很值的大家学习的一个教程，连接：

http://javascript.ruanyifeng.com/grammar/string.html#toc6