javascript で文字数カウントをするときに2バイト文字を簡単に正しく扱う

More than 1 year has passed since last update.


文字数のカウント

Webアプリを作っていると、文字数をカウントしたくなることがぼちぼちあります。

そんなとき、


count.js

let str = "hello world!";

console.log(str.length); // 12


と言ったように、.length を使ってしまいがちですが、サロゲートペアや絵文字の場合には上手くカウントされません。


count.js

let str = "😀𩸽";

console.log(str.length); // 4 (2じゃありません)


仕様で〇〇文字で区切る、とかしてるとバグになります。上の例を3文字で区切ると


count.js

let str = "😀𩸽";

console.log(str.slice(0, 3)); // 😀� (サロゲートペアの文字の前半だけになるので文字化けしてしまいます)


となります。


解決方法

頑張って、「この文字コードの範囲はサロゲートペアなので次と連結して・・・」とやればできるのですが、もっと簡単な方法があります。

Array.from です。


count.js

let str = "😀𩸽";

console.log(Array.from(str).length) // 2

for (let i of Array.from(str)) {
console.log(i);
}
// 😀
// 𩸽


便利になりました(しみじみ)。