文字列を整数に変換!JavaScriptのparseInt( )の使い方【初心者向け】

初心者向けにJavaScriptでparseInt()の使い方について解説しています。文字列を整数に変換する関数で、数値として定義したい時に便利です。parseFloat関数についても触れているので、書き方を参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでparseInt( )を使う方法について解説しています。

文字列を数値として定義することができる関数の使い方になります。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

parseIntとは

parseIntとは、文字列を整数に変換するJavaScriptのグローバル関数です。

グローバル関数とは、JavaScriptのプログラムのどこからでもアクセスし、使用可能である関数という意味です。

 

JavaScriptは、データ型の違いをそれほど気にせず使用できるプログラミング言語です。

JavaScriptで書かれたプログラムは、その前後の関数や演算の内容を汲み取り、自動的に適切なデータ型へと変換します。

一見すると非常に素晴らしいのですが、その一方で不具合の原因となります。

そこで、この自動的にデータ型を変換してもらうのではなく、しっかりとデータ型を定義することで、未知の不具合を避けることができます。

そのために、parseInt関数を使用して、文字列を変数に変換することで、しっかりと数値として定義します。

 

parseIntの書き方

parseIntは次のような書き方で使用することができます。

parseInt(str)
parseInt(str, int)

 

praseInt(str)の場合

strstringの略称で、文字列を意味します。

parseInt("123");

で指定された場合、123という文字列が整数の123にデータ型を変換します。

 

parseInt(str, int)の場合

intの部分は、基数です。

変換前の数値を何進数で表現しているかについての指定をする基準を指定します。

この基準を指定する数値を、基数と呼びます。

基数には、2進数、8進数、10進数、16進数を指定することができます。

2進数は、数値を0と1だけで表現した数値です。

8進数は、数値を0で始まり0から7までの数字で表現したものです。

10進数は、私達が日常使用している0から9までの数値を使用して表現したものです。

16進数は、数値を0x又は0Xで始まり0から9までの数字かAからFまでの記号で表現したものです。英文字はaからfでも同じ意味を表します。

 

例えば、10進数の1をそれぞれで表すと、2進数は1、8進数は01、16進数は0x1となります。

これらの2,8,10,16のどれかをintで示される引数に基数として使用することができます。

例えば、16進数の0x8をparseIntで変換する場合次のように記載します。

parseInt("0x8");

結果は、10進数の8が表示されます。

 

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

parseIntのサンプルプログラム

それでは、10進数で8を表す数値をpraseInt関数を使用し10進数に変換してみましょう。

プログラム

parseInt("1000", 2);
parseInt("010", 8);
parseInt("8", 10);
parseInt("0x8", 16);

 

プログラムの意味

parseInt("1000", 2); 2進数で表示した1000を10進数に変換します。
parseInt("010", 8); 8進数で表示した010を10進数に変換します。
parseInt("8", 10); 10進数で表示した8を10進数に変換します。
parseInt("0x8", 16); 16進数で表示した0x8を10進数に変換します。

 

表示結果

8
8
8
8

表示結果はすべて「8」になりました。

今回は、文字列を数値に変換するparseInt関数の説明をしました。

同様の機能としては、parseFloat関数や、Number関数があります。

 

parseFloat関数

parseIntと異なる点として、浮動小数点リテラルを使用することが可能です。

浮動小数点とは、整数値である1であれば、1.0と表示する小数点表記です。

 

Number関数

Number関数もparseFloat関数と同様に浮動小数点を扱うことができます。

ただし、parseIntやparseFloatと異なり、文字列混在の数値に対応できません。

しかし、paseIntやparseFloatと異なり、オブジェクトを解析することができます。

 

以上、JavaScriptでparseInt( )の使い方を解説しました。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。