[Javascript] 絵文字(サロゲートペア)を含んだ文字列の文字数を正しく取得する

こんにちは、@yoheiMuneです。
Javascriptでもユニコードは大変ですね。今日は絵文字などユニコードが含まれた文字の文字数を正しく取得する方法をブログに書きたいと思います。

目次

String.prototype.lengthでは正しく取得できない

文字数を取得するには、"aaa".lengthのようにlength関数を使いますが、絵文字などの2文字で1文字を表すサロゲートペア（Surrogate Pair）では意図せず2文字とカウントされてしまいます（サロゲートペアについてはMixiのエンジニアブログでわかりやすく解説されています）。

// アルファベットはOK
"aaa".length // => 3

// 日本語も基本的にOK
"あああ".length // => 3

// 絵文字（ユニコード）は「2」となる
"🌋".length  // => 2

困ったぞという話です。対策としてはいくつか存在します。

絵文字を含む文字の文字数を正しくカウントする

Javascriptにおける対策は以下の通りです。

codePointsOfなどを使う

codePointを計算するメソッド群があるので、それらを使います。

// これが一番いいかなー
"🌋".codePointsOf() // 1

// 上記のgetterバージョン
"🌋".codepoints    // 1

// 配列にしてからカウントもできる
"🌋".toArrayOfUChars().length // 1

npmモジュールを使う

unicode-lengthというモジュールを使うと、ちゃんと文字数を返してくれます。フロントエンドで使う場合には、babelかwebpackでのコンパイルが必要です（BabelでコンパイルやWebpackでコンパイルを参照ください）。

$ npm install --save unicode-length

unicodeLength = require('unicode-length')
console.log(unicodeLength.get('🌋'))   // 1

参考資料

以下を参照しました。ありがとうございます。

絵文字だョ! 符号化文字集合(前編) - mixi engineer blog

404 Blog Not Found:javascript - でBMP以外のUnicode文字をきちんと扱う

最後に

文字コードでの悩みはどの言語でも沢山ありますね。少しずつノウハウをブログに書けたらと思います。

最後になりますが本ブログでは、フロントエンド・Go言語・Node.js・Python・Linux・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！