JavaScriptで文字列を数値に変換する方法を解説！
プログラミングを行う上で数字の値をキャストする場面は非常に多いです。JavaScriptでは文字列を数値に変換するいくつかの方法があります。この記事ではJavaScriptで文字列を数値に変換する方法を解説していきます。
JavaScriptで文字列を数値に変換したい
データ型を変換することをキャストと言います。数字の値に対してキャストを行う場面が非常に多いです。
下記の記事ではJavaScriptで数値を3桁のカンマ区切りの文字列に変換数方法を紹介しています。ぜひあわせて読んでみてください。
今回はその中でもJavaScriptで文字列を数値に変換(キャスト)する方法をサンプルコード付きで解説していきたいと思います。
JavaScriptで文字列を数値に変換する方法
JavaScriptで文字列を数値に変化する方法として、大きく「明示的な型変換」と「暗黙的な型変換」の２つの方法があります。順番にその方法を解説していきたいと思います。
明示的な型変換
Numberメソッド
let str1 = '100';
let str2 = 'abc';
Number(str1); // 100
Number(str2); // NaNNumberメソッドというよりかは、厳密にはNumberはJavaScriptで提供されている数値型を表すクラスでそのコンストラクターになります。
引数に渡された値をNumber型に変換します。引数にNumber型に変換できないような値が渡された場合にはNaN(Not-A-Number：非数)を返します。
parseIntメソッド
let str1 = '100';
let str2 = '123abc';
parseInt(str1); // 100
parseInt(str1, 2); // 4
parseInt(str1, 8); // 64
parseInt(str1, 16); // 256
parseInt(str2) // 123parseIntメソッドは引数に指定した文字列を整数に変換してくれるメソッドです。文字列の中に数値に変換できない文字列が含まれていた場合はその文字列は無視をして数値に変換できるものだけ変換されます。
また、parseIntメソッドは第二引数に基数を指定することができ、変換前の数値が何進数で表しているかを指定します。戻り値としては10進数で表したときの数値が返ってきます。
parseFloatメソッド
let str1 = '123.456';
let str2 = '123abc';
parseInt(str1); // 123
parseFloat(str1); // 123.456
parseFloat(str2); // 123parseFloatメソッドは引数に指定された文字列を実数に変換することが出来ます。そのため、parseIntメソッドでは切り捨てられていた小数点以下の数値も含めて数値型に変換することが出来ます。
また、parseIntメソッドと同じく文字列の中に数値に変換できない文字列が含まれていた場合はその文字列は無視をして数値に変換できるものだけ変換されます。
暗黙的な型変換
JavaScriptでは上記で紹介したメソッドによって明示的に型変換を行うのではなく、暗黙的に型変換を行うこともできます。その方法について解説していきたいと思います。
数字の文字列に対して、数値演算を行うと暗黙的に文字列型から数値型に変換されます。
let str = '100';
+str; // 100
str - 0; // 100
str / 1; // 100
str * 1; // 100上記の方法で型変換は行えますが、パッと見で何を行っているかは判断しづらく可読性が悪くなると言ってよいでしょう。
また、+では暗黙的な型変換ではなく文字列連結となることもあります。
let str = '100';
str + '0'; // 1000暗黙的な型変換は可読性を悪くしたり、プログラムのバグの原因になり得る可能性が高いので、何か理由がなければ明示的に型変換を行う方が良いでしょう。
