本記事では、JavaScriptで文字列を数値に変換する方法について解説します
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 著者 | 山田 祥寛 |
|---|---|
| 発売日 | 2016/9/30 |
| ページ数 | 782ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (146件) |
参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)
| 作成者 | CodeMafia |
|---|---|
| 学習時間 | 19.5時間 |
| 受講者数 | 28,547人 |
| レビュー | (5,025件) |
複数のやり方で変換することができる
文字列を数値に変換するには「Number()」「parseInt()」「parseFloat()」「文字列連結」の4つの方法があります。それぞれ、使う場面が分けられますので適切な方法を選んで変換しましょう。
Number()
文字列を数値に変換する一番オーソドックスな方法がNumberメソッドを使う方法です。
使い方はとても簡単で、Numberメソッドの引数に数値に変換したい文字列を指定します。数値以外の文字列が含まれている状態で、Numberメソッドを使うとNaNを返します。
Number("100"); // 100
Number("100a"); // NaNparseInt()
parseIntメソッドは、2進数や16進数などに変換することができます。もちろん、10進数にも変換することも可能で、小数点や数字以外のものが含まれている場合は、それらが除外され数字のみ残ります。
使い方は、parseIntメソッドの第一引数に数値に変換したい文字列を指定し、第二引数に変換時の基数を指定します。parseInt("100", 10); // 100
parseInt("ff", 16); // 255
parseInt("100.123", 10); // 100
parseInt("100a", 10); // 100parseFloat()
parseFloatメソッドは、文字列を実数に変換します。parseIntメソッドと同様に数字以外が含まれている場合は除外されますが、小数点は残ります。
使い方は、parseFloatメソッドの引数に実数にしたい文字列を指定します。parseFloat("100"); // 100
parseFloat("100.123"); // 100
parseFloat("100a"); // 100文字列連結
数値と空文字を引く(-)ことで、数値に変換することが出来ます。"100" - 0; //100文字列連結での変換はあまりお勧めできませんが、このような方法でも変換することができるという紹介です。
まとめ
今回はJavaScriptで文字列を数値に変換する方法についてご紹介しました。
最後にポイントを軽くおさらいしましょう。
ポイント
- 単純な数値への変換はNumberメソッドを使うのがオーソドックスな方法
- 文字列に数値以外が入っている場合は、parseIntメソッドを使う
- 小数点も残したい場合は、parseFloatメソッドを使う
先輩くん
逆のパターンで数値を文字列に変換する方法も紹介しています！
DMM WEBCAMP 
CodeCamp 
TechAcademy 
