【Javascript】lengthで文字列の長さを取得してみよう

今回は、Javascriptで文字列の長さを取得する方法について解説していきます。

一度覚えてしまえば様々な場面で応用可能ですので、ぜひこの機会にマスターしておきましょう。

lengthプロパティを使って文字列の長さを取得する

JavaScriptには、予めプログラムで組み込まれている『組み込み関数』というものがあります。この組み込み関数の1つである『Stringオブジェクト』の『lengthプロパティ』を利用することで、文字列の長さを取得することができます。

基本的な使い方

使い方はとてもシンプルで、調べたい文字や変数に対してlengthプロパティを呼んであげるだけで大丈夫です。

const check = 'こんにちは！';
console.log(check.length);

lengthプロパティを使う時の注意点

lengthプロパティはとても使い勝手がよく、開発において様々な場面で活用されています。

しかし文字列だけではなく、空白もカウントの対象となります。以下の例をご覧ください。

空白がカウントされてしまう例

let check = 'test code';
console.log(check.length);

上記の例では、文字列「test code」の中に空白があり、その空白がカウントされるため、プログラムの実行結果が9になります。また、半角と全角いずれも空白1つにつき1文字でカウントされますのでご注意ください。

【応用編】lengthプロパティを使って入力された文字数を表示してみよう

続いては、応用編として、実際にlengthプロパティを使った簡単なプログラムを作ってみましょう。

仕様としては、入力フォームで値を入力するとその上部に文字数が表示されるものとします。

実装例

<p id="display">現在0文字です</p>

<input id="check" onkeyup="viewStrLen();">

<script>
  function viewStrLen() {
    let countUp = document.getElementById("check").value.length;
    document.getElementById("display").innerText = "現在" + countUp + "文字です";
  }
</script>

動作確認用

現在0文字です

  

実際に文字や空白を入力していただくと、リアルタイムで文字数がカウントされるのがお分かりいただけたかと思います。

このように、lengthプロパティを応用することで、Web上で見たことのあるような動きも簡単に実装することができます。何だかワクワクしますよね！

最後に

さて、ここまでJavascriptを使って文字列の長さを取得する方法について解説してきましたがいかがでしたか？

今回ご紹介したlengthプロパティは、空白もカウントされてしまうという注意点のみ気をつけていればとてもシンプルで使いやすいメソッドですよね。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。