JavaScriptのparseFloatを使って文字列を小数点に変換する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのparseFloatを使って文字列を小数点に変換する方法について現役エンジニアが解説しています。parseFloat関数とは、文字列を浮動小数点に置き換える関数です。文字列を整数型に変換するparseInt関数と比較して、parseFloat関数の使い方について確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptのparseFloatを使って文字列を小数点に変換する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのparseFloatを使って文字列を小数点に変換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

浮動小数点数とは

浮動小数点は、コンピュータの世界で良く使われるデータの型で、計算で誤差が発生することを前提としています。

なんでそんなものがあるかと言うと、コンピュータの計算を早くおこなったり、有限のコンピュータの世界で極端に大きな値や小さな値を扱うのに必要なためです。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

parseFloat関数とは

文字列を浮動小数点数へ置き換えることができます。

例えば、下記の様に扱われます

  • parseFloat(“-1.09”) は -1.09
  • parseFloat(“1000円”) は 「1000」
  • parseFloat(“2020year”) は 「2020」
  • parseFloat(“3.14e-2”) –> 0.0324

 

parseFloat関数を使うメリットと使われるケース

似た関数にparseInt()があります。こちらは、文字列を整数型に変換してくれる関数です。

JavaScriptは、その値の使われ方で自動的に適切な型変換をしてくれます。一方、バグを生む原因でもあります。そこで、明確な型変換を行うことで、プログラムの意図をしっかりと示し、バグの混入を軽減させます。
 

parseFloat関数の使い方

ここでは、文字付きの値を数値として利用しています。

01  <!DOCTYPE html>
02  <html>
03    <head>
04      <meta charset="utf-8">
05      <title>parseFloat</title>
06    </head>
07    <body>
08      <h1>parseFloat</h1>
09      <text id="t1">300円</text>の桃を<br>
10      <input id="t2" type="text">個購入しました
11      <br>
12      <button id="btn1">合計は</button>
13      <br>
14      <p id="t3"></p>です。
15
16    <script>
17       btn1.addEventListener('click', function() {
18         var inval = document.getElementById('t2').value;
19         console.log(inval);
20        var multiplier = document.getElementById('t1').textContent;
21         console.log(multiplier);
22        var answer = parseFloat(inval) * parseFloat(multiplier);
23        console.log(answer);
24        document.getElementById('t3').textContent = answer;
25      });
26    </script>
27    </body>
28  </html>

 

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。