この記事ではJavaScriptのlengthの使い方について解説していきます。
lengthプロパティはJavaScriptの必須知識です。
lengthを使うと、文字数のカウントや配列の要素数をカウントすることができます。
この記事の目次
文字数のカウントでlengthを使う
基本的な使い方
まずは文字数のカウントにlengthを使ってみます。
var str = "月が綺麗ですね";
console.log(str.length);// 結果
7上記のようにstr.lengthで文字数をカウントします。
応用編：入力された文字数をカウントする
次に応用編です。
入力された文字数をカウントしてみましょう。
function textCheck() {
var textValue = document.getElementById("textBox").value;
var textLength = textValue.length;
document.getElementById("countArea").innerHTML = textLength;
}<input type="text" id="textBox" onkeyup="textCheck()">
<p>文字数：<span id="countArea"></span></p>上記のコードの実際の動作は下記のようになります。
ちなみにonkeyupでリアルタイムに入力値を取得しています。
詳しくは「フォームの入力テキストをリアルタイムに取得するonkeyup」で解説していますのでご覧ください。
配列の要素数のカウントでlengthを使う
lengthでは文字数のカウント以外にも、配列の要素数をカウントすることに使うことができます。
基本的な使い方
var array = ["じゃがいも", "にんじん", "たまねぎ", "カレールー"];
console.log(array.length);// 結果
4上記のように、array.lengthで配列の要素数がカウントできます。
頻出の使い方：for文で使うlength
lengthで最も多く見かけるのは、for文の中で使う方法です。
以下のように使います。
var array = ["山田","高山", "高山田","山本", "田中"]
for(var i=0; i < array.length; i++ ) {
var result1 = array[i].replace(/山/, '池');
console.log(result1);
}//結果
池田
高池
高池田
池本
田中上記の例では、名字をチェックして、山を池に置換しています。
array.lengthで5回繰り返しを行っています。
応用編：入力された要素数をカウントする
応用編として、文章数をカウントするプログラムを見てみましょう。
「。」で区切って（split）、配列に格納しています。
function sentenceCheck() {
var sentenceValue = document.getElementById("sentenceBox").value;
var splitArray = sentenceValue.split('。')
var sentenceLength = splitArray.length - 1;
document.getElementById("countArea").innerHTML = sentenceLength;
}<textarea rows="4" cols="40" id="sentenceBox" onkeyup="sentenceCheck()"></textarea>
<p>文章数：<span id="countArea"></span></p>上記のコードは下記のように動作します。適当に文字を入れて「。」で区切ってみてください。
他のlengthの使い方
他にもlengthは関数に使ったりもできます。
それはまた別の記事で解説していきます。
この記事では基本となる、文字列と配列のlengthについて覚えましょう。
