• 较真：js判断中文字符串长度的正确方法

    对于使用javascript编程的人来说，判断字符串长度应该是常用又简单的操作，但在判断包含有中文字符或其他非asci字符的字符串长度时，却有些坑在里面。

    错误做法1

    先看看最常用的做法，也就是使用String.length判断：

    1. let str = "你好奥";
    2. let len  = str.length;
    3. console.log(len);
    4. //打印出来的结果时 3

    这个输出结果显然是不对的，因为一个汉字实际占用2个字节（GB2312编码）或3个字节（utf8编码）。

    错误做法2

    看到网上有不少同学，将非asic字符按2个字符来计算，这个也是不对的，这种方法只有在GB2312编码时有效，而实际上网页有的采用GB2312，更多的采用utf8。

    1. let str = "你好奥";
    2. let len = 0;
    3. for(var i = 0; i < str.length; i++){
    4.         charCode = str.charCodeAt(i);
    5.         if (charCode >= 0 && charCode <= 128) {
    6.             len += 1;
    7.         }else{
    8.             len += 2;
    9.         }
    10.   }
    11. console.log(len);
    12. //还有这样做的：
    13. console.log(str.replace(/[\u0391-\uFFE5]/g,"aa").length);

    这两种方法犯同样的错误，就是想当然的认为时GB2312编码。

    正确的做法

    第一种是用TextEncoder，这个需要浏览器支持，有些浏览器如ID是不支持的：

    1. let str = "你好奥";
    2. const encoder = new TextEncoder();
    3. console.log(encoder.encode(str).length);

    第二种是用Blob:

    1. let str = "你好奥"; 
    2. console.log(new Blob([str]).size);

    第三种，如果是在做nodejs后台程序，还可以用Buffer来判断：

    console.log(Buffer.byteLength(str));

    在utf8编码下，这三种方法都输出 9

    完整的例子及输出

    下面是完整的测试页面：

    1. DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    5.     <title>testtitle>
    6. head>
    7. <body>
    8. <script>
    9.     let str = "你好奥";
    10.     console.log(str.length);
    11.  
    12.     let len = 0;
    13.     for(var i = 0; i < str.length; i++){
    14.             charCode = str.charCodeAt(i);
    15.             if (charCode >= 0 && charCode <= 128) {
    16.                 len += 1;
    17.             }else{
    18.                 len += 2;
    19.             }
    20.     }
    21.     console.log(len);
    22.  
    23.     console.log(str.replace(/[\u0391-\uFFE5]/g,"aa").length);
    24.     
    25.     const encoder = new TextEncoder();
    26.     console.log(encoder.encode(str).length);
    27.  
    28.     console.log(new Blob([str]).size);
    29.     
    30.     //for nodejs
    31.     //console.log(Buffer.byteLength(str));
    32. script>
    33. body>
    34. html>

    输出结果：

    1. 3
    2. 6
    3. 6
    4. 9
    5. 9
  • 相关阅读:
    Linux 分区 parted 使用教程
    如何设计科研问卷？
    Java内部类有坑，100%内存泄露！
    QT中文乱码解决方案与乱码的原因
    基于JAVA社区果蔬电商平台演示录像计算机毕业设计源码+数据库+lw文档+系统+部署
    阿里云CDN缓存配置及优化-oss绑定CDN缓存自动刷新功能
    MySQL 空间碎片详解
    Leetcode 381. Insert Delete GetRandom O(1) - Duplicates allowed (数据结构设计好题)
    现货白银MACD实战分析例子
    【iOS】引用计数与autorelease
  • 原文地址：https://blog.csdn.net/SE_JW/article/details/132870532