JavaScript本身可通过charCodeAt方法得到一个字符的Unicode编码,并通过fromCharCode方法将Unicode编码转换成对应字符。

但charCodeAt方法得到的应该是一个16位的整数,每个字符占用两字节。在网络上传输一般采用UTF-8编码,JavaScript本身没有提供此类方法。不过有一个简便的办法来实现UTF-8的编码与解码。

Web要求URL的查询字符串采用UTF-8编码,对于一些特殊字符或者中文等,会编码成多个字节,变成%加相应16进制码的形式。比如:汉字 中 将会被编码为%E4%B8%AD。

为此JavaScript提供了encodeURIComponent与decodeURIComponent方法组合来对查询字符串进行编码与解码。利用这一点,我们可以将encodeURIComponent方法编码后的字符串进行处理,最终得到对应的字节数组。代码如下:

  1. function encodeUtf8(text) {
  2. const code = encodeURIComponent(text);
  3. const bytes = [];
  4. for (var i = 0; i < code.length; i++) {
  5. const c = code.charAt(i);
  6. if (c === '%') {
  7. const hex = code.charAt(i + 1) + code.charAt(i + 2);
  8. const hexVal = parseInt(hex, 16);
  9. bytes.push(hexVal);
  10. i += 2;
  11. } else bytes.push(c.charCodeAt(0));
  12. }
  13. return bytes;
  14. }

这个方法的作用是得到某一个字符串对应UTF-8编码的字节序列,可在服务端语言,如C#中通过 System.Text.Encoding.UTF8.GetString(bytes) 方法将字节序列解码为相应的字符串。

而对应的,将以UTF-8编码的字节序列解码为String的JavaScript方法为:

  1. function decodeUtf8(bytes) {
  2. var encoded = "";
  3. for (var i = 0; i < bytes.length; i++) {
  4. encoded += '%' + bytes[i].toString(16);
  5. }
  6. return decodeURIComponent(encoded);
  7. }

该方法将每一字节都转换成%加16进制数字的表示形式,再通过decodeURIComponent方法解码,即可得到相应的字符串。使用示例如下:

  1. var array = encodeUtf8('ab热cd!');
  2. console.log(array); // 打印 [97, 98, 231, 131, 173, 99, 100, 33]
  3. var content = decodeUtf8(array);
  4. console.log(content); // 打印 ab热cd!

对应的C#使用示例如下:

  1. var bytes = System.Text.Encoding.UTF8.GetBytes("ab热cd!");
  2. // 以下循环将打印 97 98 231 131 173 99 100 33
  3. foreach (var b in bytes)
  4. Console.Write(b + " ");
  5. Console.Write("\n");
  6. var content = System.Text.Encoding.UTF8.GetString(bytes);
  7. Console.WriteLine(content); // 打印 ab热cd!

通过以上方法组合,即可通过websocket在前端与后端之间以二进制的形式交换数据,方便协议的制定。

JavaScript进行UTF-8编码与解码的更多相关文章

  1. javascript对url进行编码和解码

    这里总结下JavaScript对URL进行编码和解码的三个方法. 为什么要对URL进行编码和解码 只有[0-9[a-Z] $ - _ . + ! * ' ( ) ,]以及某些保留字,才能不经过编码直接 ...

  2. Javascript中的url编码与解码(详解)

    摘要 本文主要针对URI编解码的相关问题做了介绍,对url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript中和编解码相关的几对函数escape / unescap ...

  3. JavaScript:详解 Base64 编码和解码

    Base64是最常用的编码之一,比如开发中用于传递参数.现代浏览器中的<img />标签直接通过Base64字符串来渲染图片以及用于邮件中等等.Base64编码在RFC2045中定义,它被 ...

  4. java中URL 的编码和解码函数

    java中URL 的编码和解码函数java.net.URLEncoder.encode(String s)和java.net.URLDecoder.decode(String s);在javascri ...

  5. 详解Base64编码和解码

    Base64是最常用的编码之一,比如开发中用于传递参数.现代浏览器中的<img />标签直接通过Base64字符串来渲染图片以及用于邮件中等等.Base64编码在RFC2045中定义,它被 ...

  6. Javascript Base64编码与解码

    原文:[转]Javascript Base64编码与解码 <html> <head> <META HTTP-EQUIV="MSThemeCompatible&q ...

  7. JavaScript字符集编码与解码

    一.字符集 1)字符与字节(Character) 字符是各种文字和符号的总称,包括乱码:一个字符对应1~n个字节,一字节对应8位,每位用0或1表示. 2)字符集(Character Set) 字符集是 ...

  8. javascript实现URL编码与解码

    一.预备知识 URI是统一资源标识的意思,通常我们所说的URL只是URI的一种.典型URL的格式如下所示.下面提到的URL编码,实际上应该指的是URI编码. foo://example.com:804 ...

  9. javascript中的Base64.UTF8编码与解码详解

    javascript中的Base64.UTF8编码与解码详解 本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...

  10. javascript实现base64编码、解码

    我们知道,浏览器的window对象提供有window.atob()和window.btoa()方法可以对字符串进行Base64编码和解码. console.log(window.btoa(window ...

随机推荐

  1. 微信小程序基本语法

    渲染 .js page ({ data :{ memo:'hello world' } }) .wxml <view>{{memo}}</view> 绑定id .js page ...

  2. jedis的连接池

    1.需要先打开虚拟机,并开启Linux系统的端口号:6379: 其中,第一行代码为修改字符编码格式,解决SSH中文乱码问题. 2.开启redis: 3.利用连接池实现数据的存取: (1)代码实现: i ...

  3. linux命令之------Linux文件系统具体目录

    Linux文件系统具体目录 (1)/  Linux文件系统的入口,也是处于最高一级的目录 (2)/bin  系统所需要的那些命令处于此目录,比如Is,cp,mkdir等命令:功能和/usr/bin类似 ...

  4. mysql 创建分组

    mysql> select * from table1; +----------+------------+-----+---------------------+ | name_new | t ...

  5. windows 共享文件夹

    windows 共享文件夹 同步工作组 右键单击"计算机",选择"属性" 更改设置 单击"更改". 输入工作组 和 主机名 启计算机使更改生 ...

  6. Don't always upset yourself !

  7. elementui 走马灯图片自适应

    点击单元格后弹出对话框轮播图片,用Carousel 走马灯实现. 希望图片无论分辨率多少,都能在一屏内显示,这时就要用图片自适应. 图片外层容器,使用 flex 布局,设置对齐方式为主轴.交叉轴居中 ...

  8. 单细胞ENS发育数据库

    iSyTE 2.0: a database for expression-based gene discovery in the eye - 眼睛发育 StemMapper: a curated ge ...

  9. Java_jdbc 基础笔记之十 数据库连接 (ResultSetMetaData 类)

    ResultSetMetaData 类 调用ResultSet 的getMetaData()方法得到ResultSetMetaData 类对象: 可用于获取关于 ResultSet 对象中列的类型和属 ...

  10. excel矩阵相乘矩阵求逆

    如何用电子表格计算两个矩阵相乘 https://jingyan.baidu.com/article/219f4bf7c9039cde452d3854.html   工具/原料 Microsoft Ex ...