【JavaScript】文字数をカウントする2つの方法

本記事の目次

JavaScriptを使って文字数をカウントしたい

JavaScriptを使って、文字数をカウントしたい場面は少なくないでしょう。

入力フォームのバリデーションは特に頻出するため、今回ご紹介する文字数をカウントする方法を覚えておくと便利です。

文字列Stringのlengthプロパティを使うことで、簡単に文字数をカウントすることができます。

const str = '文字列';

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

基本的な文字列であれば、基本的には文字列Stringのlengthプロパティを使う方法で問題ないのですが、一部の特定の文字においては、思った通りの動作をしてくれない場合があるようです。

一例として、絵文字の「😄」についてみてみましょう。

const str = '😄';

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

絵文字の「😄」は、直感的には1文字のように思いますが、文字列Stringのlengthプロパティを使う方法だと2文字としてカウントされてしまいます。

文字列Stringのlenghtプロパティを使う方法で要件を満たせない場合、配列Arrayのlengthプロパティを使う方法を試してみましょう。

const arr = [...'文字列'];

console.log(arr.length); // 3

この方法では、文字列をJavaScriptのスプレッド構文で展開して配列に格納し、その配列のlengthプロパティを利用しています。

スプレッド構文について知らない方は、ぜひ以下の記事をご参考ください。

配列Arrayのlengthプロパティを使う方法であれば、絵文字「😄」などの一部の文字の文字数についても思った通りにカウントしてくれます。

const arr = [...'😄'];

console.log(arr.length); // 1