真剣に：js の中国語文字列の長さを決定する正しい方法

JavaScript プログラミングを使用する人にとって、文字列の長さを判断することは一般的で簡単な操作ですが、中国語やその他の非 ASCI 文字を含む文字列の長さを判断する場合にはいくつかの落とし穴があります。

間違い1

まず、最も一般的に使用されるアプローチを見てみましょう。これは、String.length を使用して判断することです。

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

中国語の文字は実際には 2 バイト (GB2312 エンコード) または 3 バイト (utf8 エンコード) を占めるため、この出力は明らかに間違っています。

間違い2

インターネット上で多くの学生が非 ASIC 文字を 2 文字として計算しているのを見ました。これも間違いです。この方法は GB2312 をエンコードする場合にのみ有効です。実際、一部の Web ページでは GB2312 を使用しており、さらに多くの Web ページでは utf8 を使用しています。

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

これら 2 つの方法は、GB2312 エンコードであることを当然と考えるという同じ間違いを犯します。

正しいアプローチ

1 つ目は TextEncoder を使用する方法ですが、これにはブラウザのサポートが必要ですが、ID などの一部のブラウザではサポートされていません。

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

2 つ目は、Blob を使用することです。

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

3 番目のタイプは、 nodejsバックグラウンドプログラムを実行している場合、Buffer を使用して判断することもできます。

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

utf8 エンコードでは、3 つのメソッドすべてが 9 を出力します。

完全な例と出力

以下は完全なテストページです。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>test</title>
</head>
<body>
<script>
    let str = "你好奥";
    console.log(str.length);

    let len = 0;
    for(var i = 0; i < str.length; i++){
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) {
                len += 1;
            }else{
                len += 2;
            }
    }
    console.log(len);

    console.log(str.replace(/[\u0391-\uFFE5]/g,"aa").length);
    
    const encoder = new TextEncoder();
    console.log(encoder.encode(str).length);

    console.log(new Blob([str]).size);
    
    //for nodejs
    //console.log(Buffer.byteLength(str));
</script>
</body>
</html>

出力結果: