ywork2020.com

Title

文字列の長さを取得する

目次 (INDEX)

String.lengthとは

ここで説明するString.length とは次の語句からなるjavascriptのプロパティです。
string
読み: ストリング
意味: 文字列
length
読み: レン
意味: 長さ

目次に戻る

String.lengthプロパティの概要

ここで説明するlengthプロパティはStringオブジェクトのプロパティです。 これは文字列の長さ、文字数を取得することができます。

javascriptでは文字列を定義した時点で、それをStringオブジェクトとして扱います。 つまり、文字列を代入した変数だけでなく、文字列そのものからlengthプロパティで文字数を取得することもできます。

lengthプロパティは他のオブジェクトにもありますが、オブジェクトにより取得できる値は違います。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var strLength = str.length;

目次に戻る

サンプルコードと実行結果

ここでは文字数を取得するサンプルとしてコード中に記述した直接のテキスト、文字列が代入された変数、文字列をvalue値に持つ要素の3つから文字数を取得しています。

サンプルコード: CSS
<style>
	#idOutput{
		display: block;
	}
</style>
サンプルコード: HTML
<body>
	<p><input type="text" value="テキスト3" id="idText" disabled></p>
	<p><output id="idOutput">innerHTML</output></p>
</body>
  • 02: input要素 (この要素のvalueの値をscriptの08行目で出力しています。
  • 03: output要素 (この要素のinnerHTMLに結果を出力しています。
サンプルコード: script
<script>
	let strText = "テキスト1"
	let elmText = document.getElementById("idText");
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerHTML = 
		strText.length + "文字<br>" + 
		"テキスト2".length + "文字<br>" + 
		elmText.value.length + "文字"
	;
</script>
  • 02: 変数 (「テキスト1」という文字を代入しています。)
  • 03: 変数 (idTextの要素を参照するための変数です。)
  • 04: 変数 (idOutputの要素を参照するための変数です。)
  • 05: 代入(出力) (idOutputのinnerHTMLに06行~08行の値を代入しています。コードが長くなり、視認性が悪くなるので09行まで改行しながら記述しています。)
  • 06: 出力 (02行の変数値の文字数を取得しています。)
  • 07: 出力 ("テキスト2"とう文字列から直接、文字数を取得しています。)
  • 08: 出力 (idTextの要素のvalueの値から文字数を取得しています。)
実行結果:

サンプルテキスト: id="idText" (編集はできません)

結果: id="idOutput"
innerHTML

目次に戻る