ywork2020.com

Title

文字値を切捨て整数値に変換する

目次 (INDEX)

parseIntとは

ここで説明するparseInt とは次の語句からなるjavascriptの関数です。
parse
読み: パース
意味: 解析
int
読み: イント
意味: int型(integer・整数型)

目次に戻る

parseInt関数の概要

この関数は与えられた引数を解析して、最終的に基数の整数値を返します。 これは、単純な言い方をすると切捨て整数に変換して返すということです。

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

目次に戻る

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

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

サンプルの動作としては、テキストボックスに数字を入力した状態でボタンをクリックするとアウトプット要素に関数の戻り値を出力するものです。

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

引数2の初期値は「10」としています。 これは二つ目の引数に使用する値です。与えられた文字値を整数に変換する際に10進数で処理するために「10」を設定しています。 この二つ目の引数は2以上36未満の整数値を指定します。

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

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

引数1: id="idText"

引数2: id="idNum"

答え: id="idAnswer"
innerHTML

実行:

構文:
parseInt(string [, radix])

サンプルの初期値を当てはめると
下記のようになります。
parseInt("10.5point", 10)

参考:
例えば文字値を「FF」とした場合に
戻り値を16進数に変換したい場合は
下記のようになります。
parseInt("FF", 16)

目次に戻る

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

  1. 文字列型の値をparseInt()関数で処理すると数値型の切捨て整数に変換される
  2. parseInt('2進数文字',2) や parseInt('16進数文字',16)というような第2引数を使用すると2進数値や16進数値に変換できる

目次に戻る