輝昌2017/6/22019/5/2JavaScriptを使っていると、文字列を整数や小数点に変換する必要性がでてくることもあります。まとめparseInt()とはそれでは、まず最初に基本的な知識から学習を進めていきましょう!JavaScriptに限らず、プログラムにおいて扱うのは「数値」だけでなく「文字列」も存在していますよね?何らかの数値計算をプログラミングする時に、数値の「123」と文字列の「123」を同じように扱いたいようなケースで「parseInt」は非常に役に立つのです。文字列「123」のままでは計算ができませんが、parseIntで数値に変換してしまえば簡単に計算ができるというのが今回のテーマになります!parseInt()の使い方ここからは、実際にparseInt()を使ったプログラミング手法を学んでいきましょう。parseInt()の基本的な記述方法や引数に基数を利用する方法、10進数以外の扱い方まで詳しく解説するので参考にしてみてください。parseInt()で文字列を数値に変換する方法それでは、基本的なparseInt()を使った数値変換を試してみましょう!「parserInt」は文字列型の値を解析(パース)してNumber型の数値に変換してくれる機能を持っています。】のように引数へ数値に変換したい文字列を指定するだけです。);実行結果str:stringresult:numberこの例では、文字列「123」を変数strに代入してparseInt()を実行しています。「typeof」を使って変数「str」「result」の型をチェックしているのが分かるでしょうか?実行結果を見ると、文字列を代入していた変数「str」の型は「文字列型(string)」になっています。この文字列に対してparseInt()を実行した変数「result」の型は「数値型(number)」になっていますね!このように、parseInt()を使うと簡単に文字列を数値型として扱えるようになるので便利です。「基数」を使った数値変換の方法についてparseInt()の第2引数に「基数」を指定すると、文字列はその基数をベースに数値変換されるようになります。基数を「10」とすれば10進数になり、基数を「16」とすれば16進数で変換されるというわけです。63まず1つ目の例では、文字列「123」にparseInt()を実行することで10進数の「123」を取得しています。これは今まで通りの結果なのですが、第2引数を省略するとデフォルトで10進数が適用される仕組みになっているからなのです。2つ目の例では文字列「3F」が設定されていますが、基数を「16」と指定しているので16進数の扱いになるわけです。そのため、16進数の「3F」と解釈されて「63」というNumber型の数値(10進数)に変換されるのです。parseInt()で2進・8進・16進の変換コード例(example)さて、parseInt()で基数の使い方を学んだところで、さまざまな基数の数値変換にも挑戦してみましょう!10進数以外に2進数・8進数・16進数などの文字列を使って、それぞれの変換処理がどのようになるかを実際に試してみます。10まず最初に、10進数の「12px」に注目してください!結果的に数値の12に変換されていますが、これは「px」が数値ではないのでその時点で変換処理が中断しているためです。このように、parseIntは数値でない文字列が現れる前までの数値をNumber型に変換する機能を持っているのです。その他の2進数・8進数・16進数もそれぞれ数値変換できていることが分かりますね。プログラミングの世界ではさまざまな基数を扱うことが多いので、たとえ10進数を扱う場合でも基数は明示的に指定すると良いでしょう!parseInt()の活用ここからは、parseInt()をさらに活用する方法について見ていきましょう。カンマ区切りの扱い、最大値について、少数の丸め方について学んでいきます。parseInt()でカンマ区切りの扱い方(replace)これまで学んできたように、parseIntは数値でない「値」は認識しないわけですが、もし「カンマ区切り」の数値を変換したい場合にはどうすれば良いでしょうか?このような場合には、parseIntを実行する前にカンマを取り除く処理をプログラミングしなくてはいけません。以下のサンプルコードでは「replace()メソッド」の正規表現に「/,/g」を与えて、合致するカンマを「空文字」に置換しています。(カンマ)」だけを空文字に置換しているのが分かります。その置換された文字列は、parseIntで数値変換して返すようにreturnすることでカンマ区切りを排除した数値として実行結果に出力されていますね。2019年4月3日parseInt()で扱える最大値とは?今度は、parseIntで数値変換できる最大値について学習してみましょう!JavaScriptでは、Number型の整数の最大値を取得できる「Number.MAX_SAFE_INTEGER」という定数が用意されているのでこれを使って確かめてみましょう。64)で計算できます。9007199254740991実行結果を見てのとおり、両方のケースにおける最大値はしっかりとparseIntが実行できているのが分かりますね。実際のプログラミングでこのような大きな数値を扱うことは少ないかもしれませんが、ぜひ参考にしてみてください!小数点の丸め方(round)の注意点parseInt()で小数点を扱う場合には注意が必要なので合わせてご紹介しておきます。parseInt('3.89'));console.log(result1);console.log(result2);実行結果33この例では文字列の小数点を指定していますが、数値であっても実行結果は同じになります。実行結果をよく見ると、どちらも「3」になっていますよね?指定した小数点は「3.14」と「3.89」ですが、重要なのは四捨五入で整数になっていないという点です。単純に小数点以下を切り捨てているだけなので、混乱しないように覚えておきましょう!parseInt()のエラーハンドリングについてここからは、parseInt()メソッドでよくあるエラーの対処法について解説をしていきます!parseInt()で想定されるエラーというのは、扱う文字列が数値として認識できるかどうか?という点が重要なポイントになります。Number)」へ変換されます。次のサンプル例を見てください。NaNこの例では、「abc」という10進数は存在しないので「NaN」という結果が出力されているのが分かりますね。同じように、2進数の場合は「0」「1」以外は数値と判断されないので、2進数を基数とした場合の「789」もNaNに変換されます。このように変換処理の結果として「NaN」を取得したということは、正常に変換できなかったことを意味するわけです。try-catchで認識されないエラーとは?正常に変換できなかった場合に「NaN」という値に変換されることが分かりました。console.log(err);}一般的にはこのように記述することで、パースエラーが発生した場合にcatch()の処理が実行されるように見えますね。catch()の処理は実行されないのです!JavaScriptでは、あくまでも「NaN」という値が代入されたというだけであってエラーとは違うからです。それでは、値が「NaN」であるかどうかをどのように判断すれば良いのでしょうか?一般的には標準で提供されている「isNaN()」というメソッドを使うことになります。前節のように、parseIntに指定した文字列が数値以外の場合は「NaN」に変換されてしまいます。このような変換エラーが起きた際、JavaScriptでは「isNaN()」メソッドを活用することで条件分岐を作ることが可能です。数値ではありません!この例では、文字列「abc」を10進数の数値に変換しようとしています。数値として認識されないので結果的に「NaN」が出力されます。この時に、「isNaN()」の引数へparseInt()した結果を指定することで認識エラーかどうかを確認できるわけです。数値変換する際には、このような条件分岐を作成することで意図しない値が入ってきた場合の不具合を事前に知る手がかりとすることができます。parseFloat()で小数点に変換する方法さて、これまでは整数の数値変換を見てきましたが、プログラムで扱う数値には「小数点」も存在します。そこで、同じように小数点の文字列を数値変換するためのプログラミング処理についても学習を進めていきましょう!JavaScriptでは、小数点の数値変換を行うために「parseFloat」というメソッドが用意されているので詳しく見ていきます。parseFloat()で文字列を小数点に変換する方法parseFloatに関しては、基本的な扱いが「parseInt」とほとんど変わりません。注意すべき点として「基数」が用意されていないために一般的な10進数による小数点を扱うという点を覚えておきましょう!実際のコード例として、次のサンプルを見てください。3.14この例では、小数点「3.14」の文字列をparseFloatの引数に当てはめており、そのまま数値の「3.14」に変換されているのが分かりますね。n乗」と記述できるので、例えば10のマイナス16乗を表現したければ、「e-16」となります。そのため、2つ目の「314e-2」は10のマイナス2乗となり、最終的に1つ目と同じ小数点数3.14に変換されるというわけです。parseFloat()で間違いやすい変換例(example)parseFloat()の基本的な使い方を学んだところで、実際のプログラミングで間違いやすい例を見てみましょう。parseInt()と共通する部分もありますが、合わせて確認しておくと良いでしょう。NaNまず最初に、小数点「16.0」を変換した例に注目してください!小数点以下が「.0」の場合に関しては省略される仕様なので、数値の「16」だけが取得できるという点に注意が必要です。そのため、例えば「16.012」であればそのまま「16.012」で取得できるわけです。「1.23px」の場合は「px」が数値として認識されないのでその時点で変換処理が中断しているのが分かります。文字列の先頭に「a」などの数値以外が存在するとそもそも変換処理が行われないので「NaN」になるという点に注意しましょう!parseFloatのエラーハンドリングについてparseFloatも、文字列を小数点に変換できなかった場合にはエラーとして「NaN」を返します。0この例では、「strToFloat」関数を作成して引数に対象となる小数点を当てはめることで、条件分岐を行うようにしています。「abc12.34」のように、小数点を認識されない値が代入された場合には「NaN」となり、返り値に0を代入しているのが実行結果からも分かりますね。「parseFloat()」を使うと小数点の文字列を数値変換できるこれらの内容を踏まえて、ぜひ自分のプログラムにも積極的に取り入れて学習を進めるようにしていきましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。輝昌こんにちは!貝原(@touhicomu)と申します。現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。現住所は、日本の西海岸、長崎県は波佐見町です。ボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。以下の活動も行っています。