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

今回の記事は、

  • Javascriptのlengthプロパティの使い方が知りたい
  • lengthプロパティってどんなデータ型に使えるの?

というお悩みをお持ちの方に向けた記事になっています。

実際にJavascriptで開発されている方々にとっては非常に馴染み深いlengthプロパティですが、今回初めて知った方もいらっしゃるかと思います。

このlengthプロパティは、その名の通り、「長さを測る」ために使用することができるのですが、その範囲はとても広く、文字列や配列はもちろん、少し工夫すれば数値やオブジェクトの長さも図ることができます。

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


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

lengthとは、主に文字列の長さや配列の要素数を取得することができるプロパティのことを指し、Javascriptで文字列の長さなどを取得する方法としてはこのlengthプロパティを用いる方法が主になります。

Javascriptで記述したWebページにlengthプロパティを用いて文字列の長さを取得するようにしておけば、ユーザーが設定した最大文字数を超えた文字入力をした場合に注意を促すことができます。

lengthプロパティで文字列の長さを取得する方法について、下表にまとめます。

プロパティ説明
string.length文字列にそのままlengthを使う
let str = ‘文字列’;
str.length;
変数に代入した文字列にlengthを使う

また、lengthプロパティを用いて文字列の長さを取得する場合に注意すべきポイントは、下記の2つです。

  • 文字数は半角・全角どちらでも1文字でカウントされる
  • 空文字の場合は0を返す

そのため、

let str = 'aiueo';
console.log(str.length);

let str = 'あかさたな';
console.log(str.length);

で実行すると、どちらの結果もカウントされる文字数は「5」です。

また、

let str = '';
console.log(str.length);

で実行すると、結果は「0」を返します。

さらに、空文字は「0」を返しますが、文字列の前後に入った空白はカウントされます。つまり、

let str ='あか さ たな';
console.log(str.length);

の文字数は「5」ですが、「さ」の前後に空白スペースがあるため「7」と出力されてしまいます。

なお、文字列のlengthプロパティの使い方については以下の記事でも詳しく解説していますので、こちらもぜひご確認くださいね。

おすすめ記事

今回は、Javascriptで文字列の長さを取得する方法について解説していきます。 一度覚えてしまえば様々な場面で応用可能ですので、ぜひこの機会にマスターしておきましょう。 lengthプロパティを使って文[…]

長さ

lengthプロパティで数値の長さを取得する

lengthプロパティで数値(Number型)の長さの取得はできません。 

そもそも、Numbeとはオブジェクトの1つで、Javascriptでは「文字列はString型」「数値はNumber型」として扱われます。

そのため、基本的にlengthプロパティで文字数が取得できるのは文字列のみになります。理由は、lengthが文字列や配列のために用意されたプロパティだからです。

しかし、絶対にできないということではなく、ある方法を活用すればlengthプロパティでも数値の長さを取得可能。そのやり方とは、数値に文字列を組み合わせる方法です。

例えば、

let str = 98765 + 'あかさたな';
console.log(str.length);

で実行すると、数値「5」+文字列「5」なので、結果として「10」が出力されます。

数値のみの長さを取得するやり方は基本的には存在しませんが、数値を含めてカウントできるようにすることは可能です。

lengthプロパティで配列の要素数を取得する

lengthプロパティを用いることで、配列の要素数を取得することも可能です。

配列の要素には、「添字」と呼ばれる番号が割り当ており、lengthプロパティを用いることで、その配列の配列要素の数を取得できます。

基本的なやり方は、下記のように配列に対してlengthを実行するだけです。

let array = ['box1', 'box2', 'box3', 'box4'', 'box5'];
console.log(array.length);

これで実行すると、「5」という結果が返されます。

上記で紹介したのは基本的なやり方で、lengthに値を代入すると、習得する配列の要素数を増減させることも可能です。そのやり方とは、下記のように値を代入するだけです。

let array =  ['box1', 'box2', 'box3', 'box4'', 'box5'];
array.length = 4;
console.log(array);

これで実行すると、「box4」までしか配列の要素数を取得しません。つまり、

['box1', 'box2', 'box3']

という結果が返されます。

また、数を減らすだけでなく増やすことも可能で、数を増やす場合は下記のように記述します。

let array =  ['box1', 'box2', 'box3', 'box4'', 'box5'];
array.length = 7;

この場合、「box7」は定義していないため、

Array(7) ['box1', 'box2', 'box3', 'box4'', 'box5']

という結果が返されます。表示はされていませんが、実際の結果は、

['box1', 'box2', 'box3', 'box4'', 'box5','undefined','undefined']

となっているため、注意しましょう。ちなみに、代入できる値はプラス値だけで、マイナス値を代入するとエラーが返されます。

lengthプロパティで関数の引数の数を取得する

lengthプロパティを用いることで、その関数で定義されている「引数」の数を取得できます。

関数の引数とは、簡単に説明すると関数に渡す値のことを指します。何かを入れると計算してデータを返してくれるのが関数ですが、その関数のやりとりするための特別な変数、あるいはその変数の値が変数です。

関数によって保持している引数の数は異なっており、引数が「0」の関数もありますが、一般的には複数の引数を保持している関数がほとんどです。

その関数でいくつもの引数を受け取るように定義する方法は、下記のとおり。

function value(a, b, c, d) {}
console.log(value.length);

で、実行すると「4」という結果が返されます。

lengthプロパティでオブジェクトの要素の数を取得する

lengthプロパティを用いると、少し工夫を凝らせば、オブジェクト要素の数を取得することもできます。

Javascriptには「変数」「配列」といったデータを格納する手段がありますが、オブジェクトもデータを格納する手段の1つです。

今まで通りlengthプロパティを使おうと思うと、以下のようにしてオブジェクト要素の数を取得されるかと思います。

let obj = { x: 1, y: 2, z: 3 };
console.log(obj.length);

上記の方法で埋め込んだオブジェクト要素の数は「3」のため、本来なら「3」という結果にならなければなりません。

しかし結果は、

undefined

が返されてしまいます。

その理由は、オブジェクトにはlengthプロパティが定義されていないためです。オブジェクトの要素の数を取得するには下記のように「Object.keys」を用います。

let keys = Object.keys(obj);
console.log(keys.length);

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

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

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

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

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

最後に

さて、ここまでJavascriptのlengthプロパティの使い方について解説してきましたがいかがでしたか?

様々なデータ型に対して使用できる一方で、数値やオブジェクトに対しては使用できないという点には注意しておきましょうね。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていきましょう!

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

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