分享关于在前端如何使用JavaScript正确计算输入的文字字节数

原创 野人  2021-11-07 09:01  阅读 180 次
电费/话费9折起

在很久之前,还特意研究了下,Unicode码,因为当时不太理解,为什么还有UTF-16UTF-32UTF-8,还做了下笔记,现在再次回头看,只能说比第一次看的时候清晰了点,那么我说下关于Unicode的理解吧。

首先这个Unicode可以简单的理解,就是一种规则,比如它规定了全世界的种的A等于65,那么大家都按这种规定走,这样的好处就是不会因为不同的语言导致识别失败,翻译不正确,沟通不流畅这样类似的问题。

UTF-16UTF-32UTF-8,这个其实就是最终跟我们打交道是最频繁的了,它是Unicode这个规则的具体编码的实现方法,因为最终我们输入的这些文字是需要存储到计算机中的,而不同的编码实现方案,所计算出来的文字字节数是不一样的,那么计算机到底采用哪一种编码方法最后是有程序设计者或者有供可以选择编码方案(我们最常见的记事本就有带这个功能,另外为的时候可以选择编码方式)的来决定的。

关于上面的解释,可能有说的不对的地方,请大家多多包涵和指正,我放几篇与之相关的文章(我觉得写的比较好的文章):

Unicode与JavaScript详解

[Charset]UTF-8, UTF-16, UTF-16LE, UTF-16BE的区别

UTF-8

为什么,在开头会扯这么多概念性的东西,因为在计算字节的时候一定会遇到的,而且这块我看了网上很多文章,都是说什么汉字都是占2个字节,其他英文/符号都是占一个字节的,如果你有了解相关的Unicode的知识和具体的UTF-16UTF-32UTF-8编码实现方法,想必肯定不会在认为这是对的。

就拿我们最常见的UTF-8编码方法,它是对不同范围的字符使用不同长度的编码,也就是说可能它占用是1个字节,2个字节,3个字节,4个字节这样子的,现在我们可以拿出我们的电脑中的记事本(默认采用的就是UTF-8编码方法),我们要做的就是分别新建三个txt文件,分别输入一个字母,一个汉字,一个符号,然后查看它们对应的所以占的字节,如下图:

可以看到最明显的看到,汉字占用的是3个字节,并不是网上所说的2个字节,所以有时候还是要实践出真知啊,那么接下来给大家说下,具体关于JavaScript正确计算输入的文字字节数,代码如下:

以下代码来源;https://github.com/Anlibraly/byteConter

/**
* 计算字符串所占的内存字节数,默认使用UTF-8的编码方式计算,也可制定为UTF-16
* UTF-8 是一种可变长度的 Unicode 编码格式,使用一至四个字节为每个字符编码
* 代码范围(十六进制)               UTF-8(二进制/十六进制)                    所占字节
* 000000 - 00007F(128个代码)      0zzzzzzz(00-7F)                             一个字节
* 000080 - 0007FF(1920个代码)     110yyyyy(C0-DF) 10zzzzzz(80-BF)             两个字节
* 000800 - 00D7FF 
  00E000 - 00FFFF(61440个代码)    1110xxxx(E0-EF) 10yyyyyy 10zzzzzz           三个字节
* 010000 - 10FFFF(1048576个代码)  11110www(F0-F7) 10xxxxxx 10yyyyyy 10zzzzzz  四个字节
* 
* 注: Unicode在范围 D800-DFFF 中不存在任何字符
* {@link http://zh.wikipedia.org/wiki/UTF-8}
* 
* UTF-16 大部分使用两个字节编码,编码超出 65535 的使用四个字节
* 000000 - 00FFFF  两个字节
* 010000 - 10FFFF  四个字节
* 
* {@link http://zh.wikipedia.org/wiki/UTF-16}
* @param  {String} str 
* @param  {String} charset utf-8, utf-16
* @return {Number}
*/

function clacStrByte(str, charset) {
  let total = 0,
    charCode,
    i,
    len;

  charset = charset ? charset.toLowerCase() : "utf-8";

  if (charset === "utf-16" || charset === "utf16") {
    for (i = 0, len = str.length; i < len; i++) {
      charCode = str.charCodeAt(i);
      if (charCode <= 0xffff) {
        total += 2;
      } else {
        total += 4;
      }
    }
  } else {
    for (i = 0, len = str.length; i < len; i++) {
      charCode = str.charCodeAt(i);
      if (charCode <= 0x007f) {
        total += 1;
      } else if (charCode <= 0x07ff) {
        total += 2;
      } else if (charCode <= 0xffff) {
        total += 3;
      } else {
        total += 4;
      }
    }
  }
  return total;
}

其他资料:在线电脑字节转换器

本文地址:https://www.yerenwz.com/5066.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论