文字列を整数に変換！JavaScriptのparseInt( )の使い方【初心者向け】
初心者向けにJavaScriptでparseInt()の使い方について解説しています。文字列を整数に変換する関数で、数値として定義したい時に便利です。parseFloat関数についても触れているので、書き方を参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
高田 悠
JavaScriptでparseInt( )を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
文字列を数値として定義することができる関数の使い方を解説します。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
parseIntとは
parseIntとは、文字列の整数を数値型の整数に変換するJavaScriptの組み込み関数（最初から使える関数）です。
JavaScriptでは、文字列の"1"と数値の1は厳密には別物として扱われます。
文字列の数字で計算処理などを行おうとすると、思わぬ不具合につながることがあります。
不具合を避けるために、明示的に文字列型の整数を数値型に変換するのが、この関数の役割です。
parseIntの基礎的な使い方
parseIntの最も基礎的な文法は、以下の通りです。
parseInt(str)
strはstringの略称で、文字列を意味します。
さっそく、実際の用例を見てみましょう。
const str = "123"
const num = parseInt(str);
console.log(num); //-> 123ここでは文字列型の”123″をstrという名前の変数に代入し、その変数をparseIntの引数に指定し実行しています。
parseIntの実行結果は返り値として取得できるため、返り値をnumという変数に代入しています。
結果、数値型に変換された123が出力されました。
parseIntを使わないとどうなるのか？
ここまで読んでも、いまいちparseIntでの変換を行う場合と行わない場合でどんな違いがあるのかイメージがつきませんね。
1つの大きな違いとして、足し算を行う場合の結果の違いが挙げられます。
const str1 = "3";
const str2 = "5";
console.log(str1 + str2); //-> "35"
const num1 = parseInt(str1);
const num2 = parseInt(str2);
console.log(num1 + num2); //-> 8str1 + str2 は、文字列の数字同士の足し算です。
ここではあくまで「文字列」として扱われるため、文字同士をそのまま結合した35が結果になります。
一方、num1 + num2 は、parseIntで数値型に変換された数字同士の足し算なので、通常の四則演算と同じく8が結果になります。
この例のように、型を意識しないプログラミングでは意図しない挙動を生んでしまうことがあります。
parseIntの用法はもちろん重要ですが、それ以上に「型を意識して開発する」ということが、長期的な観点では大事であるといえるでしょう。
parseIntの応用的な使い方（基数）
parseIntには、以下のようなもう1つの記述パターンがあります。
parseInt(str, int)
第2引数intは、基数です。
基数とは、2進数や16進数の2や16の部分のことです。
基数を指定することで、変換前の数値を何進数で表現しているかについて宣言できます。
parseIntに基数を指定する用法は、数学的なロジックを扱う場合など、特殊なケースで用いることが多いため、現時点で必ず会得すべきものではありません。
しかし、parseIntと基数には1つ罠が潜んでいます。
それは、「デフォルトの基数が10進数ではないブラウザがある」ことです。
10進数は、普段用いる1,2,3…と続く数字の使い方です。
主要ブラウザの中でGoogle Chrome, Safari, Edgeでは、parseIntのデフォルトの基数が10進数であるため特に問題はないのですが、firefoxやoperaでは、このデフォルトが8進数になっています。
ブラウザによる挙動の違いによって、以下のようなレアケースでバグを引き起こす恐れがあります。
//Chrome, Safari, Edgeの場合
console.log(parseInt("08")); // -> 1
//Firefox, Operaの場合
console.log(parseInt("08")); // -> 0
8進数では”08″は0と変換されるので、このような違いが出てしまいました。
実際の開発で基数の違いによる不具合に遭遇することはまれですが、プログラミングをしていて些細な仕様の違いで悩まされることは多々あります。
上記のようなケースがあり得ることを認識していると、原因究明が素早くできるようになります。
今回の場合、ブラウザに依存せず10進数での結果を見るには、以下のように明示的に指定をしてやればよいですね。
parseInt("08", 10);
まとめ
本記事ではparseIntの基礎文法から、ブラウザによる仕様の違いまでを解説しました。
ポイントをまとめると以下の通りです。
- parseIntは文字列型の数字を数値型に変換する関数
- 文字列のまま数字を扱うと、意図しない挙動を生むことがある
- parseIntのデフォルトの基数は、ブラウザによって異なる
本記事で紹介した内容をすべて覚えることは簡単ではないですが、大切なことは「こういうケースもあるのか」と新しい視点を発見し、今後の開発でその視点を活用していくことにあります。
parseIntを通じて特に会得しやすい視点は、繰り返しになりますが「型の意識」です。
自分が今扱っているのは文字列型なのか、数値型なのか？と、型を常に意識しながら開発することで、1つ上のレベルを目指すことができます！
本記事は以上です。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
