【JavaScript】配列・文字列の長さを取得する

JavaScriptの配列を扱う上で、lengthプロパティは重要な役割を果たします。配列に含まれる要素の数を管理したり、配列の操作において条件分岐やループ処理に使われたりと、その用途は多岐にわたります。また、length の値を手動で変更することによって、配列の内容やサイズを柔軟にコントロールすることも可能です。

本記事では、lengthプロパティを利用した配列の要素数や文字列の長さの取得、実践的な活用方法から注意点まで解説します。JavaScriptを日常的に使う開発者にとって、配列の length を正しく理解し使いこなすことは、コードの品質と効率を高める上でも欠かせない要素です。

前提

GoogleChromeの開発者ツールを使って動作確認をします。
※開発者ツールの使い方はこちらのリンクをご参照ください。

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

JavaScriptでは、lengthプロパティを使用して配列や文字列の長さを取得することができます。

配列からlengthを取得する構文

以下のように指定します。

1
[配列名].length

配列のlengthを表示する実装例

以下実装でlengthプロパティから要素数3が取得できることを確認します。

1
let data = [1, 2, 3];
2
console.log(data.length);

【実行結果】
以下の通り、要素数3が取得されることを確認できました。

空の配列にlengthを指定した場合

配列が空の場合、lengthプロパティからは0が取得されます。

空配列のlengthを表示する実装例

以下実装でlengthプロパティから要素数0が取得できることを確認します。

1
let data = [];
2
console.log(data.length);

【実行結果】
以下の通り、要素数0が取得されることを確認できました。

lengthで文字列の長さを取得する

lengthを文字列に指定した場合、文字列の長さを取得することができます。

＼ITエンジニアにお勧めの一冊／

世界一流エンジニアの思考法

マイクロソフトで活躍する著者が教える、生産性を向上させるマインドセットと仕事術。

Amazonで詳細を見る

文字列の長さを表示する実装例

以下実装でlengthプロパティから文字数4が取得できることを確認します。

1
let value = "test";
2
console.log(value.length);

【実行結果】
以下の通り、文字数4が取得されることを確認できました。

配列の長さを操作する

文字列は長さを調整することができませんが、配列については長さを操作することができます。　　

配列の長さを小さくする

長さを小さくするには[配列名].lengthに配列の要素数よりも小さい数を代入します。

1
const arr = [1, 2, 3, 4, 5];
2
console.log(arr.length); // 5
3
arr.length = 3;
4
console.log(arr); // [1, 2, 3]

【実行結果】
以下の通り、5つあった要素数が3つになることを確認できました。

配列の長さを大きくする

長さを大きくするには[配列名].lengthに配列の要素数よりも大きい数を代入します。

1
arr.length = 6;
2
console.log(arr);

【実行結果】
以下の通り、配列の長さが6になりました。要素の4～6つ目は値が入っていないため、emptyとなります。

length使用時の注意点

配列の空白要素はカウントされる

lengthは配列内の空白要素も考慮します。

1
const sparseArray = [1, , 3];
2
console.log(sparseArray.length);

実行結果

以下の通り、空白要素を含めた3が出力されます。

マルチバイト文字や絵文字のカウント

日本語などのマルチバイト文字や絵文字を含む場合、lengthの値が期待通りにならないことがあります。

1
const emoji = "😀😀";
2
console.log(emoji.length); // 4（絵文字1つにつき2カウント）

【実行結果】
以下の通り、絵文字2つ×2の4が出力されました。

このような場合、spread構文(…)を使うことで正確な文字数を取得できます。

1
console.log([...emoji].length);

【実行結果】
絵文字2つに対して、期待値通り、2が出力されました。

lengthプロパティまとめ

lengthプロパティは配列や文字列の長さを取得する便利なプロパティですが、特に、以下のような特殊なケースでは注意が必要です。

• lengthを変更すると配列の要素数が変わる
• 文字列のlengthは変更不可
• Unicodeの影響で文字数が正しくカウントされない場合がある

これらの点を理解して、適切にlengthを活用しましょう。

Kindle Unlimited

「読み放題」で知識の幅を広げる

1冊数千円する専門書から、ビジネス書、実用書、雑誌まで幅広いジャンルが定額で読み放題。ITスキルの向上はもちろん、日々の情報収集や教養を深めるのにも最適です。まずは30日間の無料体験から。

• 📚 技術書も月額定額で読み放題
• 📱 PC・タブレット・スマホでいつでもどこでも
• ✨ 30日間の無料体験

無料で30日間試してみる

JavaScript学習者にお勧めの本

おすすめ

1冊ですべて身につくJavaScript入門講座

Amazonで詳細を見る 🔴 楽天で見る

独習JavaScript 新版

Amazonで詳細を見る 🔴 楽天で見る

これからのJavaScriptの教科書

Amazonで詳細を見る 🔴 楽天で見る