JavaScriptのparseInt()メソッド完全ガイド：文字列を整数に変換する方法

JavaScriptのparseInt()メソッドは、文字列や浮動小数点数を読み取り、それを整数に変換します。このメソッドは、数学的な演算を行う前に文字列を準備するためによく使われます。なぜなら、文字列はそのままでは数式の中で数値として扱うことができないからです。

JavaScriptでデータを扱っていると、文字列を整数に変換したくなる場面があります。たとえば、Webフォームでユーザーに年齢を入力してもらい、その入力値を数値に変換したいとしましょう。そうすることで、「ユーザーが16歳以上かどうか」を判定できるようになります。

そんなときに役立つのが、JavaScriptのparseInt()関数です。parseInt()は組み込みメソッドで、文字列を整数へ変換するために使用できます。

この記事では、parseInt()メソッドの基本を解説し、構文の使い方や、実際に文字列を数値へ変換するコード例を紹介します。

JavaScriptのparseInt()とは

JavaScriptのparseInt()は、文字列または浮動小数点数を整数に変換するメソッドです。主に、文字列としてフォーマットされたデータを、数学的な演算に使える状態に整えるために利用されます。

parseInt()関数の構文は次のとおりです。

parseInt(string, radix);

parseInt()メソッドは2つの引数を受け取ります。1つ目は整数に変換したい文字列で、これは必須の引数です。

2つ目の引数は「基数（radix）」と呼ばれ、省略可能です。変換対象の値がどの進法で表現されているかを指定するものです。

基数の引数はあまり頻繁には使われません。ほとんどの場合、数値は10進数で表現されており、デフォルトの基数も10進数に設定されているため、この引数を気にする必要はありません。

変換したい値の先頭や末尾には空白を含めることができますが、数値の途中に空白を入れることはできません。

また、アルファベットなどを含む値をパースしようとすると、NaN（Not a Number）という値が返されます。ただし、基数の指定によっては一部の文字（たとえば16進数における「x」など）が許容される場合もあります。これは、その文字が数値のフォーマットに関係している場合に限られます。

parseInt()の実行例

具体的な例で動作を見てみましょう。たとえば、文字列「20202」を整数に変換したい場合、次のようなコードを書きます。

console.log(parseInt("20202"));

このコードを実行すると、コンソールには次のように出力されます。

20202

出力結果に引用符が付いていないことから、返された値が文字列ではなく数値であることがわかります。

処理の流れとしては、まずJavaScriptの変数「value」に文字列型の値を代入します。値が引用符で囲まれているのは、それが文字列であることを示しています。その後、parseInt()メソッドを使って、その値を整数へと変換します。

基数（radix）引数を使った変換

同様に、「基数（radix）」引数を使えば、さまざまな進法の数値を変換できます。

基数引数には2〜36までの数値を指定でき、parseInt()関数がどの記数法を用いて値を解釈すべきかを示します。たとえば、16進数（基数16）で表された「15」を変換したい場合は、次のように書きます。

console.log(parseInt('0xF', 16));

この関数は 15 を返します。

無効な値を渡した場合の挙動

さらに、数値に変換できない文字列を渡した場合、JavaScriptは「NaN（Not a Number）」を返します。たとえば、parseInt()を使って文字列「Hey」を変換しようとすると、次のようになります。

console.log(parseInt('Hey'));

この場合、parseInt()は「NaN」を返します。「Hey」という文字列の文字は数値に変換できないためです。

まとめ

JavaScriptのparseInt()メソッドを使うと、文字列を整数に変換できます。数値として扱いたい文字列データがある場合、たとえばその文字列に対して数学的な演算を行いたいときなどに、この関数は非常に便利です。

この記事では、parseInt()メソッドの基本的な使い方を解説し、実際のコード例もいくつか紹介しました。さらに、「基数（radix）」引数をparseInt()と組み合わせて使う方法についても確認しました。

これで、あなたもparseInt()メソッドをプロのように使いこなせるはずです。JavaScriptの学習をさらに進めたい方は、ぜひ他のチュートリアルや学習ガイドも参考にしてみてください。