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

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

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

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

function encodeUtf8(text) {
const code = encodeURIComponent(text);
const bytes = [];
for (var i = 0; i < code.length; i++) {
const c = code.charAt(i);
if (c === '%') {
const hex = code.charAt(i + 1) + code.charAt(i + 2);
const hexVal = parseInt(hex, 16);
bytes.push(hexVal);
i += 2;
} else bytes.push(c.charCodeAt(0));
}
return bytes;
}

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

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

function decodeUtf8(bytes) {
var encoded = "";
for (var i = 0; i < bytes.length; i++) {
encoded += '%' + bytes[i].toString(16);
}
return decodeURIComponent(encoded);
}

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

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

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

var bytes = System.Text.Encoding.UTF8.GetBytes("ab热cd!");
// 以下循环将打印 97 98 231 131 173 99 100 33
foreach (var b in bytes)
Console.Write(b + " ");
Console.Write("\n");
var content = System.Text.Encoding.UTF8.GetString(bytes);
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. 2019.12.06 java基础

    JRE:运行环境(包含JVM(Java Virtual Machine)- Java虚拟机和核心类库) JDK: JAVA语言的软件开发工具包(Java Development Kit) Dos命令行 ...

  2. 后台增删改查的实现——java基础、jsp、servlet、数据库

    1.前台和后台的关系: 后台是由工作人员操作的,通过后台系统对数据库实行增删改查等操作,通过前台系统访问数据库,将数据库中的信息通过前台显示. 2.功能实现: (1)显示全部商品信息: home.js ...

  3. 开源项目 04 PdfSharp

    using PdfSharp.Drawing; using PdfSharp.Pdf; using System; using System.Collections.Generic; using Sy ...

  4. C# 监测每个方法的执行次数和占用时间(测试4)

    今天也要做这个功能,就百度一下,结果搜索到了自己的文章.一开始还没注意,当看到里面的一个注释的方法时,一开始还以为自己复制错了代码,结果仔细一看网页的文章,我去,原来是自己写的,写的确实不咋地. 把自 ...

  5. 分类模型的性能评价指标(Classification Model Performance Evaluation Metric)

    二分类模型的预测结果分为四种情况(正类为1,反类为0): TP(True Positive):预测为正类,且预测正确(真实为1,预测也为1) FP(False Positive):预测为正类,但预测错 ...

  6. GitHub页面基本知识

    官网地址:https://help.github.com/categories/github-pages-basics/ GitHub页面是什么? GitHub页面是一个静态的站点托管服务. GitH ...

  7. GoCN每日新闻(2019-10-06)

    GoCN每日新闻(2019-10-06) 国庆专辑:GopherChina祝大家国庆节快乐 GoCN每日新闻(2019-10-06) 1. Go 1.14 有什么新变化 http://docs.goo ...

  8. 剑指offer:数组中的逆序对

    题目描述: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%100 ...

  9. PhpStorm 头部注释、类注释和函数注释的设置(稍微完善点)

    首先,PhpStorm中文件.类.函数等注释的设置在:setting->Editor->FIle and Code Template->Includes下设置即可,其中方法的默认是这 ...

  10. golang testing 无法获取覆盖率问题

    https://segmentfault.com/q/1010000021142202