数値を文字列に変換する処理はこちらの記事を参照してください。
JavaScriptで文字列を数値に明示的に変換するコードを紹介します。
JavaScriptで文字列を数値に明示的に変換する場合には Number 関数を利用します。
Number(数値に変換する文字列)
var value = 325;
var text = Number(value);
以下のHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function TestFunc() {
var a = "100";
var b = "200";
var c = "Penguin";
var d = "0.54";
var e = "2.43";
var ab = a + b;
var ac = a + c;
var nanb = Number(a) + Number(b);
var nab = Number(a) + b;
var nc = Number(c);
var nanc = Number(a) + Number(c);
var de = d + e;
var ndne =Number(d) + Number(e);
var nane = Number(a) + Number(e);
document.forms.form1.text1.value = ab;
document.forms.form1.text2.value = ac;
document.forms.form1.text3.value = nanb;
document.forms.form1.text4.value = nab;
document.forms.form1.text5.value = nc;
document.forms.form1.text6.value = nanc;
document.forms.form1.text7.value = de;
document.forms.form1.text8.value = ndne;
document.forms.form1.text9.value = nane;
}
</script>
</head>
<body>
<form id="form1">
<button type="button" onclick="TestFunc();">Exec</button><br />
<input id="text1" type="text" /><br />
<input id="text2" type="text" /><br />
<input id="text3" type="text" /><br />
<input id="text4" type="text" /><br />
<input id="text5" type="text" /><br />
<input id="text6" type="text" /><br />
<input id="text7" type="text" /><br />
<input id="text8" type="text" /><br />
<input id="text9" type="text" /><br />
</form>
</body>
</html>
a,b,c 3つの変数を宣言します。a,b には数値の文字列を代入します。c には文字列の値を代入します。d,e には小数の文字列を代入します。
var a = "100";
var b = "200";
var c = "Penguin";
var d = "0.54";
var e = "2.43";
変数aとbの和を変数abに代入しています。文字列の値同士の和のため文字列の連結になります。
var ab = a + b;
変数aとcの和を変数abに代入しています。こちらも文字列の値同士の和のため文字列の連結になります。
var ac = a + c;
変数aとbをNumber関数で数値に変換しての和を変数nanbに代入しています。
var nanb = Number(a) + Number(b);
変数aのみをNumber関数で数値に変換して変数bとの和を変数nabに代入しています。
var nab = Number(a) + b;
数値でない文字列の値である変数cをNumber関数で数値に変換して変数ncに代入しています。
var nc = Number(c);
変数aをNuber関数で数値に変換し、数値でない文字列の値である変数cをNumber関数で数値に変換して、それぞれの和を変数nancに代入しています。
var nanc = Number(a) + Number(c);
小数の数値の値の文字列変数d,eの和を変数deに代入します。文字列同士の和となるため、文字列の結合になります。
var de = d + e;
変数dとeをNumber関数で数値に変換し、2つの変数の和を変数ndneに代入します。
var ndne =Number(d) + Number(e);
変数aとeをNumber関数で数値に変換し、2つの変数の和を変数naneに代入します。
var nane = Number(a) + Number(e);
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページ内の[Exec]ボタンをクリックします。テキストボックスに下図の値が表示されます。
var ab = a + b; はそれぞれの値が文字列の値のため、文字列を結合した値 100200 が表示されます。
var ac = a + c もそれぞれの値が文字列の値のため、文字列を結合した値 100Penguin が表示されます。
var nanb = Number(a) + Number(b); はそれぞれの値が数値に変換されるため、数値の和である 300が表示されます。
var nab = Number(a) + b; は変数aの値は数値に変換されますが、変数bの値は文字列のままのため、文字列の結合処理として実行され 100200 が表示されます。
var nc = Number(c); は数値でない文字列を数値に変換したため、NaN が変数に代入されます。
var nanc = Number(a) + Number(c); は変数aは数値に変換されますが、変数cは NaN に変換されるため、2変数の和も NaN の値が表示されます。
var de = d + e; はそれぞれの値が文字列の値のため、文字列が連結された値0.542.43が表示されます。
var ndne = Number(d) + Number(e); は小数の文字列同士を数値に変換し和を計算します。数値の合計の 2.97 が表示されます。
var nane = Number(a) + Number(e); は整数の文字列を数値に変換したものと、小数を数値に変換したものの和を計算します。数値の合計の 102.43 が表示されます。
Number() 関数を利用して、文字列で表現された数値を数値の値に変換できました。
