文字列を数値に変換する - JavaScript

JavaScriptで文字列を数値に明示的に変換するコードを紹介します。

概要

JavaScriptで文字列を数値に明示的に変換する場合には Number 関数を利用します。
補足
数値を文字列に変換する処理はこちらの記事を参照してください。

書式

Number(数値に変換する文字列)

プログラム例

コード

以下の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 が表示されます。
  • 2番目のテキストボックス var ac = a + c もそれぞれの値が文字列の値のため、文字列を結合した値 100Penguin が表示されます。
  • 3番目のテキストボックス var nanb = Number(a) + Number(b); はそれぞれの値が数値に変換されるため、数値の和である 300が表示されます。
  • 4番目のテキストボックス var nab = Number(a) + b; は変数aの値は数値に変換されますが、変数bの値は文字列のままのため、文字列の結合処理として実行され 100200 が表示されます。
  • 5番目のテキストボックス var nc = Number(c); は数値でない文字列を数値に変換したため、NaN が変数に代入されます。
  • 6番目のテキストボックス var nanc = Number(a) + Number(c); は変数aは数値に変換されますが、変数cは NaN に変換されるため、2変数の和も NaN の値が表示されます。
  • 7番目のテキストボックス var de = d + e; はそれぞれの値が文字列の値のため、文字列が連結された値0.542.43が表示されます。
  • 8番目のテキストボックス var ndne = Number(d) + Number(e); は小数の文字列同士を数値に変換し和を計算します。数値の合計の 2.97 が表示されます。
  • 9番目のテキストボックス var nane = Number(a) + Number(e); は整数の文字列を数値に変換したものと、小数を数値に変換したものの和を計算します。数値の合計の 102.43 が表示されます。

Number() 関数を利用して、文字列で表現された数値を数値の値に変換できました。

このページのキーワード
  • JavaScirpt 文字列 数値
  • JavaScirpt 文字列 数値 変換
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-04-30
作成日: 2021-03-16
iPentec all rights reserverd.