【JavaScript入門】文字列を数値に変換する方法｜parseInt、 parseFloat

JavaScriptを使っていると、文字列を整数や小数点に変換する必要性がでてくることもあります。

今回は、JavaScriptで数値変換をしたい場合によく使う「parseInt」や、小数点を扱う際に便利な「parseFloat」について学習をしましょう！

などの基本から応用的な活用技についてもしっかりと解説をしていきます！この記事で、「parseInt」「parseFloat」の使い方をしっかりとマスターできるようになりましょう！

parseInt()とは

それでは、まず最初に基本的な知識から学習を進めていきましょう！JavaScriptに限らず、プログラムにおいて扱うのは「数値」だけでなく「文字列」も存在していますよね？

何らかの数値計算をプログラミングする時に、数値の「123」と文字列の「123」を同じように扱いたいようなケースで「parseInt」は非常に役に立つのです。

つまり、文字列「123」のままでは計算ができませんが、parseIntで数値に変換してしまえば簡単に計算ができるというのが今回のテーマになります！

parseInt()の使い方

ここからは、実際にparseInt()を使ったプログラミング手法を学んでいきましょう。parseInt()の基本的な記述方法や引数に基数を利用する方法、10進数以外の扱い方まで詳しく解説するので参考にしてみてください。

parseInt()で文字列を数値に変換する方法

それでは、基本的なparseInt()を使った数値変換を試してみましょう！

「parserInt」は文字列型の値を解析（パース）してNumber型の数値に変換してくれる機能を持っています。一般的な記述方法としては、【 parseInt( 文字列 ) 】のように引数へ数値に変換したい文字列を指定するだけです。

次のサンプル例を見てください！

var str = '123';
var result = parseInt( str );

console.log( 'str：' + typeof str );
console.log( 'result：' + typeof result );

実行結果

str：string
result：number

この例では、文字列「123」を変数strに代入してparseInt()を実行しています。「typeof」を使って変数「str」「result」の型をチェックしているのが分かるでしょうか？実行結果を見ると、文字列を代入していた変数「str」の型は「文字列型（string）」になっています。

そして、この文字列に対してparseInt()を実行した変数「result」の型は「数値型（number）」になっていますね！このように、parseInt()を使うと簡単に文字列を数値型として扱えるようになるので便利です。

「基数」を使った数値変換の方法について

parseInt()の第２引数に「基数」を指定すると、文字列はその基数をベースに数値変換されるようになります。つまり、基数を「10」とすれば10進数になり、基数を「16」とすれば16進数で変換されるというわけです。

試しに、実際のコードで確認してみましょう！

console.log( 'parseInt("123", 10) = ' + parseInt("123", 10) );

console.log( 'parseInt("3F", 16) = ' + parseInt("3F", 16) );

実行結果

parseInt("123", 10) = 123
parseInt("3F", 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進数の場合
console.log('10進数「12px」 = ' + parseInt('12px', 10));

//2進数の場合
console.log('2進数「101」 = ' + parseInt('101', 2));

//8進数の場合
console.log('8進数「755」 = ' + parseInt('755', 8));

//16進数の場合
console.log('16進数「AZZ」 = ' + parseInt('AZZ', 16));

実行結果

10進数「12px」 = 12
2進数「101」 = 5
8進数「755」 = 493
16進数「AZZ」 = 10

まず最初に、10進数の「12px」に注目してください！結果的に数値の12に変換されていますが、これは「px」が数値ではないのでその時点で変換処理が中断しているためです。

このように、parseIntは数値でない文字列が現れる前までの数値をNumber型に変換する機能を持っているのです。その他の2進数・8進数・16進数もそれぞれ数値変換できていることが分かりますね。

プログラミングの世界ではさまざまな基数を扱うことが多いので、たとえ10進数を扱う場合でも基数は明示的に指定すると良いでしょう！

parseInt()の活用

ここからは、parseInt()をさらに活用する方法について見ていきましょう。主に、カンマ区切りの扱い、最大値について、少数の丸め方について学んでいきます。

parseInt()でカンマ区切りの扱い方(replace)

これまで学んできたように、parseIntは数値でない「値」は認識しないわけですが、もし「カンマ区切り」の数値を変換したい場合にはどうすれば良いでしょうか？

このような場合には、parseIntを実行する前にカンマを取り除く処理をプログラミングしなくてはいけません。例えば、以下のサンプルコードでは「replace()メソッド」の正規表現に「/,/g」を与えて、合致するカンマを「空文字」に置換しています。

function removeComma(value) {
    var num = value.replace(/,/g, "");
    
    return parseInt(num);
}

var result = removeComma( '123,456,789' );

console.log( "123,456,789 → " + result );

実行結果

123,456,789 → 123456789

この例では、対象となる文字列に「replace()」メソッドを使って「, (カンマ)」だけを空文字に置換しているのが分かります。その置換された文字列は、parseIntで数値変換して返すようにreturnすることでカンマ区切りを排除した数値として実行結果に出力されていますね。

このように、カンマ区切りや小数点のような特殊な値を変換するサンプル事例については、次の記事でさらに詳しく解説しているのでぜひ参考にしてみてください！

parseInt()で扱える最大値とは？

今度は、parseIntで数値変換できる最大値について学習してみましょう！JavaScriptでは、Number型の整数の最大値を取得できる「Number.MAX_SAFE_INTEGER」という定数が用意されているのでこれを使って確かめてみましょう。

また、64ビットコンピュータの数値の最大値は2の64乗であり、これはMath.pow(2, 64)で計算できます。それぞれのケースで、parseIntできるかどうかを確認してみましょう！

// ①Number型の最大整数値
var maxNumber = String( Number.MAX_SAFE_INTEGER );

// ②64ビットPCの最大値
var bigNumber = String( Math.pow(2, 64) );

console.log("parseInt(" + bigNumber + ") = " + parseInt(bigNumber));
console.log("parseInt(" + maxNumber + ") = " + parseInt(maxNumber));

実行結果

parseInt(18446744073709552000) = 18446744073709552000
parseInt(9007199254740991) = 9007199254740991

実行結果を見てのとおり、両方のケースにおける最大値はしっかりとparseIntが実行できているのが分かりますね。実際のプログラミングでこのような大きな数値を扱うことは少ないかもしれませんが、ぜひ参考にしてみてください！

小数点の丸め方(round)の注意点

parseInt()で小数点を扱う場合には注意が必要なので合わせてご紹介しておきます。まずは、parseInt()の引数に小数点を指定するとどうなるかを見てみましょう！

var result1 = parseInt('3.14');
var result2 = parseInt('3.89'));

console.log(result1);
console.log(result2);

実行結果

3
3

この例では文字列の小数点を指定していますが、数値であっても実行結果は同じになります。実行結果をよく見ると、どちらも「3」になっていますよね？

指定した小数点は「3.14」と「3.89」ですが、重要なのは四捨五入で整数になっていないという点です。単純に小数点以下を切り捨てているだけなので、混乱しないように覚えておきましょう！

parseInt()のエラーハンドリングについて

ここからは、parseInt()メソッドでよくあるエラーの対処法について解説をしていきます！parseInt()で想定されるエラーというのは、扱う文字列が数値として認識できるかどうか？という点が重要なポイントになります。

そこで、このような認識エラーに対処できる便利なメソッドの使い方を学んでいきましょう！

数値と認識されない場合は「NaN」になる

parseInt()の引数に文字列を設定した時に、数値として認識できなかった場合は「NaN（Not a Number）」へ変換されます。

次のサンプル例を見てください。

console.log( '10進数「abc」 = ' + parseInt('abc', 10) ); 
console.log( '2進数「789」 = ' + parseInt('789', 2) );

実行結果

10進数「abc」 = NaN
2進数「789」 = NaN

この例では、「abc」という10進数は存在しないので「NaN」という結果が出力されているのが分かりますね。同じように、2進数の場合は「0」「1」以外は数値と判断されないので、2進数を基数とした場合の「789」もNaNに変換されます。

このように変換処理の結果として「NaN」を取得したということは、正常に変換できなかったことを意味するわけです。

try-catchで認識されないエラーとは？

正常に変換できなかった場合に「NaN」という値に変換されることが分かりました。それでは、このエラーを処理する場合を考えてみましょう！

一番最初に考えるのは「try-catch文」を使ったエラーハンドリングではないでしょうか？次のサンプル例を見てください！

try {

    var result = parseInt('abcd');

} catch(err) {

    console.log(err);

}

一般的にはこのように記述することで、パースエラーが発生した場合にcatch()の処理が実行されるように見えますね。しかしながら、catch()の処理は実行されないのです！

JavaScriptでは、あくまでも「NaN」という値が代入されたというだけであってエラーとは違うからです。それでは、値が「NaN」であるかどうかをどのように判断すれば良いのでしょうか？

一般的には標準で提供されている「isNaN()」というメソッドを使うことになります。

「isNaN()」を使ったエラー処理の方法

前節のように、parseIntに指定した文字列が数値以外の場合は「NaN」に変換されてしまいます。このような変換エラーが起きた際、JavaScriptでは「isNaN()」メソッドを活用することで条件分岐を作ることが可能です。

次のサンプル例を見てください！

 var result = parseInt("abc", 10); 

if( isNaN(result) ) { 

    console.log( '数値ではありません！' ); 

} else { 

    console.log( '正しい数値です！' ); 

}

実行結果

数値ではありません！

この例では、文字列「abc」を10進数の数値に変換しようとしています。しかしながら、数値として認識されないので結果的に「NaN」が出力されます。

この時に、「isNaN()」の引数へparseInt()した結果を指定することで認識エラーかどうかを確認できるわけです。数値変換する際には、このような条件分岐を作成することで意図しない値が入ってきた場合の不具合を事前に知る手がかりとすることができます。

parseFloat()で小数点に変換する方法

さて、これまでは整数の数値変換を見てきましたが、プログラムで扱う数値には「小数点」も存在します。そこで、同じように小数点の文字列を数値変換するためのプログラミング処理についても学習を進めていきましょう！

JavaScriptでは、小数点の数値変換を行うために「parseFloat」というメソッドが用意されているので詳しく見ていきます。

parseFloat()で文字列を小数点に変換する方法

parseFloatに関しては、基本的な扱いが「parseInt」とほとんど変わりません。しかしながら、注意すべき点として「基数」が用意されていないために一般的な10進数による小数点を扱うという点を覚えておきましょう！

実際のコード例として、次のサンプルを見てください。

var result1 = parseFloat('3.14');
var result2 = parseFloat('314e-2');

console.log( 'parseFloat("3.14") = ' + result1 );
console.log( 'parseFloat("314e-2") = ' + result2 );

実行結果

parseFloat("3.14") = 3.14
parseFloat("314e-2") = 3.14

この例では、小数点「3.14」の文字列をparseFloatの引数に当てはめており、そのまま数値の「3.14」に変換されているのが分かりますね。

また、10のn乗は「e – n乗」もしくは「e + n乗」と記述できるので、例えば10のマイナス16乗を表現したければ、「e-16」となります。そのため、2つ目の「314e-2」は10のマイナス2乗となり、最終的に1つ目と同じ小数点数3.14に変換されるというわけです。

parseFloat()で間違いやすい変換例(example)

parseFloat()の基本的な使い方を学んだところで、実際のプログラミングで間違いやすい例を見てみましょう。parseInt()と共通する部分もありますが、合わせて確認しておくと良いでしょう。

次のサンプル例を見てください！

console.log('16.0 = ' + parseFloat("16.0"));
console.log('1.23px = ' + parseFloat("1.23px"));
console.log('a1.23 = ' + parseFloat("a1.23"));

実行結果

16.0 = 16
1.23px = 1.23
a1.23 = NaN

まず最初に、小数点「16.0」を変換した例に注目してください！小数点以下が「.0」の場合に関しては省略される仕様なので、数値の「16」だけが取得できるという点に注意が必要です。

そのため、例えば「16.012」であればそのまま「16.012」で取得できるわけです。また、「1.23px」の場合は「px」が数値として認識されないのでその時点で変換処理が中断しているのが分かります。

しかし、文字列の先頭に「a」などの数値以外が存在するとそもそも変換処理が行われないので「NaN」になるという点に注意しましょう！

parseFloatのエラーハンドリングについて

parseFloatも、文字列を小数点に変換できなかった場合にはエラーとして「NaN」を返します。そこで、parseIntの時と同じように「isNaN()」メソッドで条件分岐する関数を作ってみましょう！

function strToFloat(value) {
    var num = parseFloat(value);

    if (isNaN(num)) {
        num = 0;
    }

    return num;
}

console.log("strToFloat(123.456) = " + strToFloat('123.456'));
console.log("strToFloat(abc12.34) = " + strToFloat('abc12.34'));

実行結果

strToFloat(123.456) = 123.456
strToFloat(abc12.34) = 0

この例では、「strToFloat」関数を作成して引数に対象となる小数点を当てはめることで、条件分岐を行うようにしています。「abc12.34」のように、小数点を認識されない値が代入された場合には「NaN」となり、返り値に0を代入しているのが実行結果からも分かりますね。

もちろん、parseIntの時と同じように「OR ( || )」の論理演算子を使った手法も問題なく活用できるので、ぜひ確かめるようにしておいてください！

まとめ

今回は、JavaScriptで整数や小数点の文字列を数値変換できる「parseInt」「parseFloat」について学習をしました！

最後に、重要なポイントをおさらいしておきましょう！

これらの内容を踏まえて、ぜひ自分のプログラムにも積極的に取り入れて学習を進めるようにしていきましょう！