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

文字数のカウント

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);
}
// 😀
// 𩸽

便利になりました。