数値→文字列、文字列→数値：データ型の変換方法【JavaScript勉強ログ #13】

※本記事はJavaScriptの勉強がてら、自分達の学んだことを備忘録的に残しておくことが目的です。素人が四苦八苦しながらJavaScriptを学ぶ過程を楽しんでいただければ、そしてそれが、少しでも誰かのためになれば嬉しいです。
また、本記事は備忘録的にまとめていきますので、詳細までは書かないこともあります。ご了承を～

はじめに
データ型の変換
最後に
参考書籍・Udemy

はじめに

さて今回は、データ型の変換方法についてまとめたいと思います。

数値を文字列に変換したり、文字列を数値に変換したりと、実は色々な場面で使うデータ型の変換。そりゃ、何かしら計算をする際は文字ではできませんし、必然的に必要になってくることは理解できますね。しっかりとマスターしておきましょう。

データ型の変換

データ型の変換はそれぞれ以下のように実行しましょう。

★文字列 → 数値

Number(データ);

★数値 → 文字列

String(データ);

例は以下の通りです。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript勉強ログ</title>
	</head>
	<body>
		半径の値をを入力してください。
		<form name="form1" id="f1" action="#">
			<input name="textBox1" id="t1" type="text" value="" />
			<input type="button" value="入力"
				onclick="onButtonClick();" />
		</form>
		<hr/>
		<div id="output"></div>
		<script>
			function onButtonClick() {
				var radius = document.forms.f1.t1.value;
				radius = Number(radius); //文字列型から数値に変換
				var ans = radius ** 2 * 3.14;
				target = document.getElementById("output");
				target.innerText = "半径" + radius + "の円の面積は" + ans + "です";
			}
		</script>
	</body>
</html>

テキストボックスに入力された値を数値に変換し、計算をしてから結果を表示させています。

以前まとめたテキストボックスに入力されたデータの利用方法も重要になりますのでしっかりと頭に入れておきましょう。