JavaScript

lengthの使い方と実例【JavaScript】

この記事では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について覚えましょう。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5