この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。

文字数とは？

要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。

そもそも文字数とは何でしょうか。

たとえば、アルファベットの「A」は1文字と数えられそうです。

次の絵文字は、何文字になるでしょうか？

この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。

以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこしい事情がつきまといます。

本稿のタイトルは「文字数を正確にカウントするには？」としましたが、以上の事情により「正確に」の部分は要件定義によるところが出てくる部分です。なので、ここで紹介する方法はすべてのアプリケーションに適用できるものではない点はご留意ください。

JavaScriptの文字列と`length`

JavaScriptの文字列の内部エンコードはUTF-16です。UTF-16にはサロゲートペアというものがあり、1文字(1コードポイント)を複数の符号(コードユニット)で表現する仕組みがあります。たとえば、「あ」は1コードユニットで1コードポイントですが、一方「🍎」はサロゲートペアの文字で、2つのコードユニットで1コードポイントを表現します。

JavaScriptのString.prototype.lengthはUTF-16のコードユニットを数えるので、「あ」と「🍎」では結果が異なります。

console.log("あ".length);
//=> 1
console.log("🍎".length);
//=> 2

サロゲートペアで表現される漢字もあり、𩸽(ほっけ)がその例です。これもlengthでは2とカウントされます。

console.log("𩸽".length);
//=> 2

文字列とスプレッド演算子

JavaScriptでは、文字列に対してスプレッド演算子...を使うと、文字列を文字ごとに区切った配列が得られます。

console.log([..."abc"]);
//=> [ 'a', 'b', 'c' ]

この区切り方は、UTF-16のコードユニットごとではなく、ユニコードのコードポイント単位で区切ります。したがって、一旦文字列を配列化し、その要素数を数えれば、サロゲートペアかどうかを考慮する必要はなくなります。

console.log([..."あ"].length);
//=> 1
console.log([..."🍎"].length);
//=> 1
console.log([..."𩸽"].length);
//=> 1

コードポイント単位で数えれば万全かというと、そうでない場合もあります。たとえば、イングランドの旗の絵文字を1文字と数えたい場合です。

この絵文字は、一見1コードポイントに見えますが、実際は以下の7つのコードポイントが合わさって1文字として表示されています。

U+1F3F4󠁧 Black Flag 🏴
U+E0067 Tag Latin Small Letter G
U+E0062 Tag Latin Small Letter B
U+E0065 Tag Latin Small Letter E
U+E006E Tag Latin Small Letter N
U+E0067 Tag Latin Small Letter G
U+E007F Cancel Tag

そのため、スプレッド演算子でこの文字列を配列にすると、7つの要素に分解されるため、7文字とカウントされます。

console.log([..."🏴󠁧󠁢󠁥󠁮󠁧󠁿"].length);
//=> 7

イングランドの旗は極端な例ですが、身近な日本国旗の絵文字であっても、実は2コードポイントなので、2文字とカウントされます。

console.log([..."🇯🇵"]);
//=> [ '🇯', '🇵' ]
console.log([..."🇯🇵"].length);
//=> 2

旗以外にも絵文字には、肌のトーンや持ち物のコードポイントを組み合わせて、1つの絵文字を成すものもあります。

console.log([..."👨🏻‍💻"]);
//=> [ '👨', '🏻', '‍', '💻' ]
console.log([..."👨🏻‍💻"].length);
//=> 4

Intl.Segmenter

JavaScriptで文字数を数える方法として、Intl.Segmenterを使う方法があります。

Intl.Segmenterはロケールを考慮して、文字列を書記素や単語、文に分解できるAPIです。Intl.SegmenterはNode.jsや主要な最新ブラウザにて実装されています。(古いブラウザでは実行できない可能性はあります)

文字列を書記素単位に分解するには、Intl.Segmenterクラスのgranularityオプションにgraphemeを指定します。たとえば、「あいうえお」を分解すると次のような配列が得られます。

const segmenter = new Intl.Segmenter("ja", { granularity: "grapheme" });
console.log([...segmenter.segment("あいうえお")]);
//=>
// [
//   { segment: 'あ', index: 0, input: 'あいうえお' },
//   { segment: 'い', index: 1, input: 'あいうえお' },
//   { segment: 'う', index: 2, input: 'あいうえお' },
//   { segment: 'え', index: 3, input: 'あいうえお' },
//   { segment: 'お', index: 4, input: 'あいうえお' }
// ]

String.prototype.lengthや[...string].lengthと比べると記述量が多いですが、次のようなユーティリティ関数を定義しておくと良いです。

function countGrapheme(string) {
  const segmenter = new Intl.Segmenter("ja", { granularity: "grapheme" });
  return [...segmenter.segment(string)].length;
}

Intl.Segmenterはサロゲートペアや絵文字の合成も考慮しているので、より正確な文字数がカウントできます。

console.log(countGrapheme("あ"));
//=> 1
console.log(countGrapheme("🍎"));
//=> 1
console.log(countGrapheme("𩸽"));
//=> 1
console.log(countGrapheme("🏴󠁧󠁢󠁥󠁮󠁧󠁿"));
//=> 1
console.log(countGrapheme("🇯🇵"));
//=> 1
console.log(countGrapheme("👨🏻‍💻"));
//=> 1

比較

文字列	`str.length`	`[...str].length`	`Intl.Segmenter`
`"あ"`	1	1	1
`"🍎"`	2	1	1
`"𩸽"`	2	1	1
`"🏴󠁧󠁢󠁥󠁮󠁧󠁿"`	14	7	1
`"🇯🇵"`	4	2	1
`"👨🏻‍💻"`	7	4	1

おわり

最後までお読みくださりありがとうございました。この投稿が少しでも役に立ちそうだったシェアしていただけると嬉しいです！

#JavaScript

Qiita書きました😌

文字数のカウントって、str.lengthでOKかと思いきや、実はややこしい問題だったりします。https://t.co/gwOm8JkQOt
— suin・読者1万人『サバイバルTypeScript』公開中！ (@suin) April 11, 2022

文字数とは？

JavaScriptの文字列とlength

文字列とスプレッド演算子

Intl.Segmenter

比較

おわり

JavaScriptの文字列と`length`