JavaScriptで文字列を数値に変換する方法を解説!

プログラミングを行う上で数字の値をキャストする場面は非常に多いです。JavaScriptでは文字列を数値に変換するいくつかの方法があります。この記事ではJavaScriptで文字列を数値に変換する方法を解説していきます。

コンテンツ [表示]

  1. 1JavaScriptで文字列を数値に変換したい
  2. 2JavaScriptで文字列を数値に変換する方法
  3. 2.1明示的な型変換
  4. 2.2暗黙的な型変換

JavaScriptで文字列を数値に変換したい

データ型を変換することをキャストと言います。数字の値に対してキャストを行う場面が非常に多いです。

下記の記事ではJavaScriptで数値を3桁のカンマ区切りの文字列に変換数方法を紹介しています。ぜひあわせて読んでみてください。

あわせて読みたい
JavaScriptで数値を3桁のカンマ区切りにする方法!のイメージ
JavaScriptで数値を3桁のカンマ区切りにする方法!
JavaScriptで数値を3桁のカンマ区切りにする方法について解説します。JavaScriptで数値を3桁のカンマ区切りにすることで、金額などを表示させる際、パッと見て非常に分かりやすいものになります。ここでは2つの方法を解説します。

今回はその中でもJavaScriptで文字列を数値に変換(キャスト)する方法をサンプルコード付きで解説していきたいと思います。

JavaScriptで文字列を数値に変換する方法

JavaScriptで文字列を数値に変化する方法として、大きく「明示的な型変換」と「暗黙的な型変換」の2つの方法があります。順番にその方法を解説していきたいと思います。

明示的な型変換

Numberメソッド

let str1 = '100';
let str2 = 'abc';

Number(str1); // 100
Number(str2); // NaN

Numberメソッドというよりかは、厳密には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) // 123

parseIntメソッドは引数に指定した文字列を整数に変換してくれるメソッドです。文字列の中に数値に変換できない文字列が含まれていた場合はその文字列は無視をして数値に変換できるものだけ変換されます。

また、parseIntメソッドは第二引数に基数を指定することができ、変換前の数値が何進数で表しているかを指定します。戻り値としては10進数で表したときの数値が返ってきます。

parseFloatメソッド

let str1 = '123.456';
let str2 = '123abc';

parseInt(str1); // 123
parseFloat(str1); // 123.456
parseFloat(str2); // 123

parseFloatメソッドは引数に指定された文字列を実数に変換することが出来ます。そのため、parseIntメソッドでは切り捨てられていた小数点以下の数値も含めて数値型に変換することが出来ます。

また、parseIntメソッドと同じく文字列の中に数値に変換できない文字列が含まれていた場合はその文字列は無視をして数値に変換できるものだけ変換されます。

暗黙的な型変換

JavaScriptでは上記で紹介したメソッドによって明示的に型変換を行うのではなく、暗黙的に型変換を行うこともできます。その方法について解説していきたいと思います。

数字の文字列に対して、数値演算を行うと暗黙的に文字列型から数値型に変換されます。

let str = '100';

+str; // 100
str - 0; // 100
str / 1; // 100
str * 1; // 100

上記の方法で型変換は行えますが、パッと見で何を行っているかは判断しづらく可読性が悪くなると言ってよいでしょう。

また、+では暗黙的な型変換ではなく文字列連結となることもあります。

let str = '100';

str + '0'; // 1000

暗黙的な型変換は可読性を悪くしたり、プログラムのバグの原因になり得る可能性が高いので、何か理由がなければ明示的に型変換を行う方が良いでしょう。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

みぎさん
ライター

みぎさん

大阪府の現役システムエンジニアです。WEB制作やWEB開発、ライティングなど幅広く活動しております。 【言語/FW】HTML,CSS,Sass,JavaScript,jQuery,Vue.js,PHP,WordPress,Laravel,Java