JavaScriptでlengthを使って文字数をカウントする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScript文字数をカウントする方法について現役エンジニアが解説しています。文字列の文字数をカウントするには、lengthメソッドを使います。文字数だけではなく、配列に使えば要素数を数えることも出来ます。文字列の数や配列の要素数をカウントしてみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

井上 祐介

NEC・Microsoftの認定インストラクター。Z80アセンブラ・C++・C#・PHP・JAVAなどの経験を経て業務で使用するプログラムの開発や新入社員プログラミング研修の講師を行った。

JavaScript文字数をカウントする方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

文字列の長さ(文字数)や配列の要素数などを調べるとき「length」を使用します。

この「length」は文字列(String)や配列(Array)などのオブジェクトに定義されているプロパティです。

目次

1時間でできる無料体験!

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

オブジェクトとはデータ(値)とそのデータを処理する機能(関数)を1つにまとめた集合体です。オブジェクトについて、詳しくは公式ドキュメントの「JavaScript オブジェクトの基本」をご覧ください。

 

大石ゆかり

JavaScript文字数を数えるにはどうしたらいいですか?

田島悠介

JavaScriptで文字数を数えるにはlengthプロパティが使えるよ。

ただ、lengthプロパティで取得できるのは文字数だけじゃないんだ。

配列のlengthプロパティは要素数、関数のlengthプロパティは引数の数も取得できるんだよ。

大石ゆかり

lengthプロパティって文字数だけじゃないんですね。

田島悠介

そうなんだ。

lengthプロパティを使うオブジェクトによっていろいろ使い方が変わるんだ。

じゃあ、さっそくJavaScriptで文字数をカウントする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

lengthプロパティとは

文字列の長さ配列の要素数を取得するプロパティがlengthです。

他にも関数の引数の数を調べたり、数値の桁数を取得したりできます。

 

lengthプロパティの使い方

書式

// 文字列
文字列の文字数 = 文字列.length;

// 配列
配列の要素数 = 配列.length;

// 関数
関数の引数の数 = 関数名.length;

文字列lengthプロパティで、文字列の文字数を取得します。

文字列が空ならlengthプロパティは 0 です。

全角と半角文字の区別はなく数えられます。

配列なら要素数関数なら引数の数がlengthプロパティの戻り値です。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

文字列の文字数(length)を取得する

文字列の文字数を取得するサンプルコードです。

ソースコード

const str = 'TechAcademyマガジン';

// HTMLに文字数を出力
document.body.textContent = str.length;

表示結果

See the Pen
js_length_string
by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

解説

const str = 'TechAcademyマガジン';

文字数を調べたい文字列を定数 strに代入します。

document.body.textContent = str.length;

Webページに文字数を出力します。

変数 strに入っている文字列「TechAcademyマガジン」は全部で15文字なので、str.lengthの値は「15」です。

※「const」は固定された値である定数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。

 

【参考】数値の桁数を取得する

文字数を取得するlengthプロパティを応用して、数値の桁数を取得できます。

String( 数値 ).lengthで指定された数値の桁数が求められます。

数値の変数でも同じように求められますが、数値の変数なら 数値の変数.toString().length で求める方法もあります。

See the Pen
js_length_int
by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

配列の要素数(length)を取得する

配列の要素数を取得するサンプルコードです。

ソースコード

const fruits = ['りんご', 'バナナ', 'ぶどう'];

//配列の要素数を取得
document.body.textContent = fruits.length;

表示結果

See the Pen
js_length_array
by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

const fruits = ['いちご', 'りんご', 'バナナ'];

配列 fruitsを宣言し、「いちご」・「りんご」・「バナナ」の3つの要素を配列に格納します。

document.body.textContent = fruits.length;

配列 fruitslengthプロパティにより、要素数「3」を取得します。

 

【参考】配列のlengthプロパティに代入する

配列のlengthプロパティは取得だけではなく値の代入を行うことができます。

要素数を配列のlengthプロパティに代入して、要素の数を減らしたり増やしたりできます。

要素数を増やしたときは、配列に空の要素が追加されます。

See the Pen
js_length_array_set
by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

 

関数の引数の数(length)を取得する

関数のlengthプロパティを使うと、引数の数を取得できます。

ソースコード

// 関数 addの定義
function add(num1, num2){
    return num1 + num2;
}

// 関数 addの引数の数を出力
document.body.textContent = add.length;

表示結果

See the Pen
js_length_func
by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

解説

function add(num1, num2){
    return num1 + num2;
}

関数 addを宣言しています。

引数は num1num2の2つです。

document.body.textContent = add.length;

引数の数をWebページに出力します。

関数 addの引数は num1num2の2つなので、add.lengthの値は 2です。

※引数にデフォルト値可変長引数(残余引数)が設定されている場合、直前の引数の数までしか数えられません。

引数のデフォルト値や可変長引数について、詳しくは公式ドキュメント「関数の引数」をご覧ください。

 

1時間でできる無料体験!

まとめ

lengthプロパティ文字数配列の要素数関数の引数の数を求められます。

文字列lengthプロパティから文字数を取得します。

配列lengthプロパティから要素数を取得、設定します。

関数lengthプロパティ引数の数を取得します。

 

大石ゆかり

lengthプロパティって文字数はもちろん、配列の要素数まで数えられるんですね。

関数の引数の数まで分かるなんて驚きです。

田島悠介

そうだね。

lengthプロパティをどのオブジェクトから使うかで役割が変わってくるんだ。

大石ゆかり

プログラミングっておもしろいですね!

また、いろいろ教えてください!

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する