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

文字列を数字に変換する

以下のスクリプトをHTMLのBODY内に記入してみましょう。 なお以下のフォームの意味が分からない方は、 当コンテンツのフォーム関係をご覧になってみて下さい。

<form name="keisan">
<input type="text" value="3">＋
<input type="text" value="5"><br>
<input type="button" value="計算" onclick="tasu()">
</form>

<script>

function tasu()
{
  //テキストボックスの数値を変数に格納する
  var num1=document.keisan.elements[0].value;
  var num2=document.keisan.elements[1].value;
  
  //計算結果をアラートで表示
  alert(num1+num2);
}
</script>

＜サンプル＞

サンプルのボタンを押すと、計算結果の「8」ではなく、 「35」と表示されると思います。 なぜならテキストボックスに記入されている数字は実際には文字列なので、 「3」という文字と「5」という文字が連結されて表示される訳です。

では数値として認識してもらうために、 変数に格納する部分を以下のように書き足してみてください。

  var num1=parseInt(document.keisan.elements[0].value);
  var num2=parseInt(document.keisan.elements[1].value);

＜サンプル＞

今度はきちんと計算結果「8」が表示されると思います。 テキストボックスの数字を色々と変えて試してみて下さい。

上記スクリプトにあるように、 parseInt()が文字列を整数に変換するJavaScriptの命令文です。 parseFloat()を使えば文字列を少数に変換します。

parseInt(文字列)

文字列を整数に変換する

parseFloat(文字列)

文字列を少数に変換する

エラーが出たときの処理

エラーが出るとスクリプトがそこで止まってしまいます。 それを回避するための方法を以下に記しておきます。

try
{
  エラーが出そうな処理を記述
}
catch(e)
{
  エラーが出た時の処理を記述
}

tryの中括弧内に書かれたスクリプトにエラーが出た場合、 catchの中括弧内の処理を行います。 catchにはエラーの内容を格納する引数が必要ですが、 通常はあまり意識する必要はありません。上記のように「e」を入れておきます。

try{ 処理 }catch(e){ エラーが出た時の処理 }

tryのカッコ内の処理でエラーが出た場合、catch()の中カッコ内処理を行う