zoukankan      html  css  js  c++  java
  • 原生js实现base64编码与解码字符串及对象

    前言:最近维护了node开发jade模版的项目,场面一度尴尬,和平时做的大相径庭,好不难受。特别是有需要把参数转换为base64拼接到url上,各种姿势试了,只能用原生方法编码解码,来总结一下。

    一. Window 中的 btoa()和atob()解决字符串
    该编码和解码只实用于字符串。btoa()该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串,返回一个 base-64 编码的字符串;atob() 用于解码。使用方法:`编码:const newBase = window.btoa("test");解码:const oldValue = window.atob(newBase);`。
    注:如果有中文,需要使用URL转码配合使用。使用方法:`编码:const newBase = window.btoa(window.encodeURIComponent(JSON.stringify("原生js实现base64编码与解码字符串及对象")));解码:const oldValue =window.decodeURIComponent(window.atob(newBase));`

    二.  Node.js Buffer(缓冲区)解决对象
    JavaScript 语言自身只有字符串数据类型,没有二进制数据类型。但在处理像TCP流或文件流时,必须使用到二进制数据。因此在Node.js中,定义了一个Buffer类,该类用来创建一个专门存放二进制数据的缓存区。每当需要在Node.js中处理I/O操作中移动的数据时,就有可能使用 Buffer 库。v6.0之前创建Buffer对象直接使用new Buffer()构造函数来创建对象实例,所以在v6.0以后,官方文档里面建议使用 Buffer.from() 接口去创建Buffer对象。使用方法:`Buffer.from(JSON.stringify({type: "xxx",id: "xxx"})).toString("base64")`。

    三.  原生js解决对象

    let keyStr="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    encodeFuc: function (input) {
      let output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;
      input = utf8_encode(input);
      while (i < input.length) {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);
      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;
      if (isNaN(chr2)) {
        enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
        enc4 = 64;
      }
      output = output +
      keyStr.charAt(enc1) + keyStr.charAt(enc2) +
      keyStr.charAt(enc3) + keyStr.charAt(enc4);
      }
      return output;
    }
    utf8_encode: function (string) {
      string = string.replace(/
    /g,"
    ");
      let utftext = "";
      for (let n = 0; n < string.length; n++) {
        let c = string.charCodeAt(n);
        if (c < 128) {
        utftext += String.fromCharCode(c);
      } else if((c > 127) && (c < 2048)) {
        utftext += String.fromCharCode((c >> 6) | 192);
        utftext += String.fromCharCode((c & 63) | 128);
      } else {
        utftext += String.fromCharCode((c >> 12) | 224);
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }
    
      }
      return utftext;
    }
    // 编码
    const newBase = encodeFuc(JSON.stringify({type: "xxx",id: "xxx"}));
    
    decodeFuc: function (input) {
      let output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;
      input = input.replace(/[^A-Za-z0-9+/=]/g, "");
      while (i < input.length) {
        enc1 = keyStr.indexOf(input.charAt(i++));
        enc2 = keyStr.indexOf(input.charAt(i++));
        enc3 = keyStr.indexOf(input.charAt(i++));
        enc4 = keyStr.indexOf(input.charAt(i++));
        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;
        output = output + String.fromCharCode(chr1);
        if (enc3 != 64) {
          output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
          output = output + String.fromCharCode(chr3);
        }
      }
      output = utf8_decode(output);
      return output;
    }
    utf8_decode: function (utftext) {
      let string = "", i = 0, c = 0, c1 = 0, c2 = 0, c3 = 0;
      while ( i < utftext.length ) {
        c = utftext.charCodeAt(i);
        if (c < 128) {
          string += String.fromCharCode(c);
          i++;
        } else if((c > 191) && (c < 224)) {
          c2 = utftext.charCodeAt(i+1);
          string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
          i += 2;
        } else {
          c2 = utftext.charCodeAt(i+1);
          c3 = utftext.charCodeAt(i+2);
          string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
          i += 3;
        }
      }
      return string;
    }
    // 解码
    const oldValue = JSON.parse(decodeFuc(newBase));
    

      



  • 相关阅读:
    NGUI_Depth
    NGUI_Font
    NGUI_Atlas
    NGUI_概述
    02、Mecanim之IK动画
    JAVA8学习——深入Comparator&Collector(学习过程)
    JAVA8学习——从源码角度深入Stream流(学习过程)
    JAVA8学习——从使用角度深入Stream流(学习过程)
    JAVA8学习——深入浅出方法引用(学习过程)
    回顾2019,总结,反思,展望,行动。
  • 原文地址:https://www.cnblogs.com/zz-zrr/p/11544002.html
Copyright © 2011-2022 走看看