先生と生徒の会話形式で理解しよう

生徒

「先生、文字列で入力された数字を計算に使いたいときはどうすればいいですか？」

先生

「JavaScriptでは文字列を数値に変換する方法がいくつかあります。代表的なのはparseInt、parseFloat、Numberです。」

生徒

「違いは何ですか？全部数値に変換するんですよね？」

先生

「はい、どれも文字列を数値に変換しますが、用途や動作が少しずつ異なります。それぞれ順番に見ていきましょう！」

1. parseIntで整数に変換する

parseIntは文字列を整数に変換する関数です。文字列の先頭から数字を読み取り、整数を返します。


const str = "123";
const num = parseInt(str);
console.log(num); // 123
console.log(typeof num); // number


123
number

注意点として、文字列の中に数字以外の文字が含まれている場合、先頭の数字だけを読み取ります。


const str2 = "123abc";
console.log(parseInt(str2)); // 123

数値に変換できない文字列の場合はNaN（Not a Number）を返します。

2. parseFloatで小数も変換できる

parseFloatは文字列を浮動小数点数に変換します。小数点を含む数字も正しく変換可能です。


const str = "3.14";
const num = parseFloat(str);
console.log(num); // 3.14
console.log(typeof num); // number


3.14
number

文字列の先頭に数字があればその部分だけを数値化します。


const str2 = "3.14円";
console.log(parseFloat(str2)); // 3.14


3.14

ただし、数字が先頭にない文字列はNaNになります。

Numberは文字列全体を数値に変換します。小数や整数の両方に対応しています。先頭以外に数字以外の文字が含まれると変換できずNaNになります。


console.log(Number("123")); // 123
console.log(Number("3.14")); // 3.14
console.log(Number("123abc")); // NaN


123
3.14
NaN

Numberは全体が正しい数値形式かどうかをチェックしたい場合に便利です。

入力された文字列を数値に変換して計算に利用する例です。


const input1 = "10";
const input2 = "3.5";

const sum = parseInt(input1) + parseFloat(input2);
console.log(sum); // 13.5


13.5

このようにparseIntとparseFloatを組み合わせると、整数と小数が混ざった文字列も計算可能です。

数値に変換できない場合、結果はNaNになります。isNaN()関数で判定可能です。


const str = "abc";
const num = Number(str);
if (isNaN(num)) {
  console.log("数値に変換できません");
}


数値に変換できません

文字列から数値に変換する際は、常にNaNになる可能性を考慮しましょう。