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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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上で見たことのあるような動きも簡単に実装することができます。何だかワクワクしますよね!

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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