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

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

当ページのリンクには広告が含まれています。

記事の文字数:1722

JavaScriptで配列の要素数や文字列の長さを取得する場合は、lengthプロパティを指定します。本記事では、JavaScriptのlengthプロパティの基本的な使い方を解説。配列や文字列の長さを取得する方法だけでなく、lengthを変更した際の挙動や注意点についても詳しく説明します。


スポンサーリンク

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

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

前提

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

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

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

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

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

構文
[配列名].length

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

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

実行コード
let data = [1, 2, 3];
console.log(data.length);

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

alt text

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

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

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

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

実行コード
let data = [];
console.log(data.length);

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

alt text

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

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

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

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

実行コード
let value = "test";
console.log(value.length);

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

alt text

配列の長さを操作する

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

配列の長さを小さくする

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

実行コード
const arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 5
arr.length = 3;
console.log(arr); // [1, 2, 3]

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

alt text

配列の長さを大きくする

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

実行コード
arr.length = 6;
console.log(arr);

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

alt text

length使用時の注意点

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

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

実行コード
const sparseArray = [1, , 3];
console.log(sparseArray.length);

実行結果

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

alt text

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

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

実行コード
const emoji = "😀😀";
console.log(emoji.length); // 4(絵文字1つにつき2カウント)

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

alt text

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

実行コード
console.log([...emoji].length);

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

alt text

lengthプロパティまとめ

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

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

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

プログラミング学習者にお勧めの書籍

独学で身につけるためのプログラミング学習術: Ver.5

新品価格
¥980から
(2025/4/22 21:15時点)


以上で本記事の解説を終わります。
よいITライフを!
Scroll to Top