今回はJavaScriptを使用して、文字列の長さを取得して、入力した文字数を数値化する方法を紹介します。
インターネット上にある文字数カウントWEBツールは基本的にこの仕組みを利用して作っています。
今回のプロパティをしっかりと理解して、応用すれば同じ様なツールも作成する事が出来ます。
こんな場合に使用
- 入力フォームで文字数をカウントしたい
- 原稿などの文字数を調べたい
難易度(MAX10 | ★★★★★★☆☆☆☆ |
文字列の長さ(文字数)を取得する方法
文字列.length | 文字列の長さ |
Array.from(文字列).length | 文字列の長さ |
文字列.lengthで文字列の長さ(文字数)を測る事が出来ます。使い方は以下の通りです。
var A = 'プログラミング';
console.log(A.length); // 7と出力される
var B = 'KT LIFE';
console.log(B.length); // 7と出力される。空白も含む

以下のコードは「.length」で文字数をカウントするテキストエリアを作成するHTMLです。
<textarea onkeyup="document.getElementById('xxxx').value=this.value.length">
</textarea>テキストエリアの文字列の文字数は <input type="text" id="xxxx"> 文字です。

しかし「😄」などの絵文字は一文字分として扱われません。
この様な絵文字を一文字としてカウントするには「Array.from(文字列).length」を使用します。
const A = '😄';
console.log(A.length);
Array.from('😄').length;
console.log(Array.from('😄').length);

以上が「文字列の長さ(文字数)を取得する方法:JavaScriptの基礎17」でした。