【JavaScript】lengthを使って文字列の長さや配列の長さを取得

lengthとは

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

文字列（String）とlength

基本的な構文と書き方

sample.js

// 文字列にそのままlengthを使う
string.length

// 変数に代入した文字列にlengthを使う
var str = 'こんにちは';
str.length;

上記のように使用することで文字数を取得することができる。
※文字数が「半角・全角」に関係なく1文字でカウントされる。

文字列の長さを取得

sample.js

var str = 'こんにちは';

console.log(str.length);

文字列は5文字なので実行結果には「5」という数値が出力される。

数値型(Number)とlength

lengthはあくまで文字列や配列のために用意されているので数値型には利用できない。しかし、文字列と組み合わせれば利用することができる。

sample.js

var str = 12345 + '文字列';

console.log(str.length);

実行結果は「8」。数値と文字列を連結させることで数値を含めて全体が文字列となり、文字の長さを取得できる。

配列(Array)とlength

基本的な構文と書き方

sample.js

var array = [配列,配列]；

array.length;

配列の要素数を取得

sample.js

var array = ['リンゴ','ブドウ','メロン','イチゴ'];

console.log(array.length)

実行結果は「4」。要素数が多いものや動的に変化するような配列だとlengthが重要となる。

要素数をlengthで変更

要素数を減らす

sample.js

var items = ['リンゴ','ブドウ','メロン','イチゴ'];

// 要素数を3に変更する
items.length = 3;

console.log(items);

実行結果は ['リンゴ' , 'ブドウ' , 'メロン']

配列の場合はlengthに値を代入することで要素数を自由に変更することができる。自動的に末尾の「イチゴ」は削除される。

要素数を増やす

sample.js

var items = ['リンゴ','ブドウ','メロン'];

// 要素数を5にする
items.length = 5;

console.log(items);

実行結果

sample.js

Array(5) ['リンゴ','ブドウ','メロン']

// 可視化するとこんな感じ
item = ['リンゴ','ブドウ','メロン','undefind','undefind']

追加された要素は未定義のため 'undefind' が格納されている。

関数(function)とlength

↓「引数」をもつ一般的な関数の定義

sample.js

function value(引数,引数,引数・・・)　{
  // 処理内容
}

引数をもつ関数にlengthプロパティを使用

sample.js

function value(item1, item2, item3, item4 ) {
 // 処理内容
}
console.log(value.length);

実行結果は「4」
このように関数を使用することでその関数で定義されている「引数」がいくつあるか取得することができる。

オブジェクト(Object)とlength

sample.js

var object = {
  name: '太郎',
  age: 30,
  location: '日本'
}

console.log(object.length);

実行結果は「undefind」
オブジェクトに対してlengthを使用することはできない。

Object.key()を使って要素数を取得

sample.js

var value = Object.key(object);

console.log(value.length);

オブジェクトの要素を配列データとして取得できるObject.key()の引数にオブジェクトを指定することで要素数を取得することができる。