js原生实现base64编码解码（utf8字符集）

待我称王封你为后i 2023-08-17 17:29 129阅读 0赞

详细参考本篇博文[https://blog.csdn.net/qq\_25243451/article/details/88658864][https_blog.csdn.net_qq_25243451_article_details_88658864]

后台传来经过 `base64` 编码的字符串(原始字符串含有中文), 需要在前端进行解码, 但 js 中的 `atob` 解码方法不支持 `unicode` 字符集( `btoa` 也是), 换言之, 中文被解码出来是会乱码的。

网上流传的多是使用encodeURIComponent 和 decodeURIComponent，原理是对中文进行百分号编码，转换为%xxx这种样式，但是这样使用之后会使编码变长，如下

![1457120-20190829104604452-189209943.png][]

图1（期望的编码值）

![1457120-20190829104617771-2043260923.png][]

图2（使用百分号编码之后）

同样的元字符，使用encodeURIComponent之后字符更长，原因是没有对百分号编码的字符的进行编码，导致编码后的字符串变长

因此在这里调用escape和unescape方法：

const Base64 = {
      encode: (str) => {
        return window.btoa(unescape(encodeURIComponent(str)))
      },
      decode: (str) => {
        return decodeURIComponent(escape(window.atob(str)))
      }
    }

具体的详解可以参考开头提到的那篇博文

转载于:https://www.cnblogs.com/sue7/p/11428429.html

[https_blog.csdn.net_qq_25243451_article_details_88658864]: https://blog.csdn.net/qq_25243451/article/details/88658864
[1457120-20190829104604452-189209943.png]: /images/20230808/990b1bf24eb84679befe6491ac4f6f17.png
[1457120-20190829104617771-2043260923.png]: /images/20230808/b8ea873c56ac4665ba53795848ab1d9e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS Base64编码和解码

Base64 是一种编码方式，可以将任意字符（包括二进制字符流）转成可打印字符。JavaScript 定义了两个与 Base64 相关的全局方法。 btoa()：字符串

柔光的暖阳◎/ 2024年03月31日 13:06/ 0 赞/ 80 阅读

相关 js原生实现base64编码解码（utf8字符集）

详细参考本篇博文[https://blog.csdn.net/qq\_25243451/article/details/88658864][https_blog.csdn.ne

待我称王封你为后i/ 2023年08月17日 17:29/ 0 赞/ 130 阅读

相关 js base64 编码解码

js base64 编码解码 encode decode，可以直接使用 function Base64() { // private

小鱼儿/ 2023年03月04日 09:17/ 0 赞/ 202 阅读

相关用 Js 进行 Base64 编码、解码

从IE10+浏览器开始，所有浏览器就原生提供了Base64编码、解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。 window.btoa

灰太狼/ 2022年12月06日 15:59/ 0 赞/ 294 阅读

相关 base64解码 java8_java8 文件图片转base64 编码解码

import sun.misc.BASE64Encoder; import java.io.\; import java.nio.file.Files; import j

水深无声/ 2022年11月03日 05:45/ 0 赞/ 253 阅读

相关 base64编码解码

调用： ---js var s = new base64InOut(); //编码 var values = s.base64Encodes(

﹏ヽ暗。殇╰゛Y/ 2022年08月21日 11:54/ 0 赞/ 318 阅读

相关 BASE64编码解码

BASE64,是一种公共编解码算法大家都是遵循同一种算法来对字节数组进行编解码,所以可以通用. java在很多公共的框架中都有BASE64的实现. 可以用: A

痛定思痛。/ 2022年05月30日 08:27/ 0 赞/ 453 阅读

相关 base64编码和解码

base64编码和解码原理 1. 计算机中，每个字节是8位的二进制数 2. base64编码中，每一个8位的二进制数中只有后6位时有

你的名字/ 2022年02月13日 04:47/ 0 赞/ 433 阅读

相关 js base64编码，C#解码

　　 JS: 　　 this.Base64 = function (str) { return btoa(encodeURIComp

Dear 丶/ 2021年10月18日 15:15/ 0 赞/ 518 阅读

相关 Java 8 Base64 编码解码

Java 8 Base64 编码解码 `Base64` 是一种常见的字符编码解码方式，一般用于将二进制数据编码为更具可读性的 `Base64` 进制格式。在 `Jav

约定不等于承诺〃/ 2021年09月22日 02:56/ 0 赞/ 475 阅读