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

JavaScriptでは、lengthプロパティを使用して配列や文字列の長さを取得することができます。本記事では、lengthの基本的な使い方と注意点について解説します。

前提

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

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

構文

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

1
[配列名].length

実装例

以下実装で要素数3が取得できることを確認します。

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

実行結果

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

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

配列が空の場合、lengthで0が取得されます。

実装例（空配列）

以下実装で要素数0が取得できることを確認します。

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

実行結果（空配列）

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

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

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が出力されます。

Unicodeサロゲートペア

日本語などのマルチバイト文字や絵文字を含む場合、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は変更不可
• Unicodeの影響で文字数が正しくカウントされない場合がある

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

スポンサーリンク