zoukankan      html  css  js  c++  java
  • Javascript 中 atob/btoa

    解决 Javascript 中 atob 方法解码中文字符乱码问题

    由于一些网络通讯协议的限制,你必须使用 window.btoa() 方法对原数据进行编码后,才能进行发送。接收方使用相当于 window.atob() 的方法对接受到的 base64 数据进行解码,得到原数据。例如,发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。

    window.btoa 与 window.atob 不支持中文

    对于 unicode 编码的字符进行 base64 编码之后,通过浏览器原生的 btoa 方法界面中文会乱码。

    在 bash 终端,将“中文”转成 base64 编码

    $ echo 中文 | base64
    5Lit5paHCg==
    

    在 Chrome console 通过 window.atob 解码,结果为乱码

    > window.atob('5Lit5paHCg==')
    中文
    

    在 Chrome console 中执行 windows.btoa 编码,报错

    > window.btoa('中文')
    Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
    

    从错误提示看, btoa 仅支持 ASCII 编码。

    借助 encodeURIComponent 和 decodeURIComponent 转义非中文字符

    由于 btoa 仅支持 ASCII 字符序列,如果通过 encodeURIComponent 将中文字符编码成ASCII字符序列,再通过 btoa 进行 base64 编码。

    编码

    > window.btoa(encodeURIComponent('中文'))
    "JUU0JUI4JUFEJUU2JTk2JTg3"
    

    解码

    > decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
    "中文"
    

    虽然到达了曲线救国的目的,但是由于 encodeURIComponent 和 decodeURIComponent 已经达到了转义控制字符的目的,使用 atob 和 btoa 感觉是多此一举。

    第三方 Base64 工具

    webtoolkit.base64是一个第三方实现的 Base64 编码工具,完美的支持 unicode 编码的字符串。

    > Base64.encode('中文')
    "5Lit5paH"
    
    > Base64.decode('5Lit5paH');
    "中文"
    

    另外,如果服务端为 Nodejs ,可用如下 coffee 代码进行 base64 的编码和解码。

    btoa: (s)->
        (new Buffer(s, 'utf8')).toString('base64')
    atob: (s)->
        (new Buffer(s, 'base64').toString('utf8'))

    from:https://blog.csdn.net/qq_37193537/article/details/89379621

  • 相关阅读:
    node-red 使用 创建第一个流程
    node-red 安装
    docker postgres 导出导入数据
    6大设计模式(转)
    常见的算法
    @Autowired与@Resource的区别
    Elasticsearch
    redis搭建主从复用-读写分离
    转载redis持久化的几种方式
    后台启动mysql
  • 原文地址:https://www.cnblogs.com/mxhmxh/p/10729869.html
Copyright © 2011-2022 走看看