ywork2020.com

Title

文字値を浮動小数点値に変換する

目次 (INDEX)

parseFloatとは

ここで説明するparseFloat とは次の語句からなるjavascriptの関数です。
parse
読み: パース
意味: 解析
float
読み: フロート
意味: 浮く、浮かぶ

目次に戻る

parseFloat関数の概要

この関数は与えられた引数を解析して、最終的に浮動小数点値を返します。

与えられた引数が文字値の場合は、そのまま解析を行い浮動小数点値に変換されますが、 引数が文字値でない場合は一旦、ToStringで文字値に変換してから解析が行われます。

目次に戻る

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

このサンプルでは、 input要素text型、input要素button型、output要素の三つの要素を使用しています。

サンプルの動作としては、テキストボックスに数字を入力した状態でボタンをクリックするとアウトプット要素に計算結果を出力するものです。 計算方法は与えられた数字をparseFloat関数で数値に変換して、それに1を加算するというものです。

テキストボックスの初期値は「100円」としています。 もちろん「100」という数字でも構いませんが、単位を付けて入力しているところがポイントとなります。 つまり、この関数の理解のポイントとしては先頭に数字を含むテキストも浮動小数点値として返してくれるということです。

是非、テキストボックスに色々な値を入力して、実際にparseFloat関数の戻り値を確認していただきたいと思います。 なお、「NaN」という結果が返ってきた場合は数値に変換できない文字列だっだということです。
「NaN」は【非数 / Not a Number】

サンプルコード: HTML
<body>
	<p><input type="text" value="100円" id="idText"></p>
	<p><output id="idAnswer">innerHTML</output></p>
	<p><input type="button" value="ボタン" onclick="evtName()"></p>
</body>
  • 02: input要素text型 (識別子はidText)
  • 03: output要素 (識別子はidAnswer)
  • 04: input要素button型 (onclickイベントでevtName()関数の呼び出し)
サンプルコード: script
<script>
	let elmText = document.getElementById("idText");
	let elmAnswer = document.getElementById("idAnswer");
	function evtName(){
		elmAnswer.innerHTML = parseFloat(elmText.value) + 1;
	}
</script>
  • 02: 変数を宣言 (elmTextという変数でidTextをもつ要素を参照できるようになる)
  • 03: 変数を宣言 (elmAnswerという変数でidAnswerをもつ要素を参照できるようになる)
  • 04: 関数の作成 (ボタンクリックで呼び出されるevtName()という関数を作成します)
  • 05: 関数の処理 (elmAnswerのinnerHTMLプロパティにparseFloat関数を使った計算結果を代入します)
実行結果:

サンプルテキスト: id="idText"

答え: id="idAnswer"
innerHTML

実行:

目次に戻る

parseFloat関数を使用する上での要点

  1. 引数に与えられた文字値を解析して浮動小数点値に変換して返します。
  2. 先頭に数字を含むテキストなら数値として変換することができます。
  3. 数値に変換できない文字値の場合は「NaN」を返します。

目次に戻る