parseInt() / parseFloat() / Number()

文字列を数値に変換するための関数です。『parseInt()』は整数に、『parseFloat()』は小数を含む数値に、『Number()』は厳密な数値変換を行います。

構文

// 文字列を整数に変換します。
var num = parseInt(文字列);
var num = parseInt(文字列, 基数);

// 文字列を浮動小数点数に変換します。
var num = parseFloat(文字列);

// 文字列を数値に変換します。
var num = Number(文字列);

関数一覧

関数	概要
parseInt(文字列)	文字列の先頭から整数として解釈できる部分までを数値に変換します。第2引数で基数を指定できます。
parseInt(文字列, 基数)	基数を指定して変換します。『10』で10進数、『16』で16進数、『2』で2進数として解釈されます。
parseFloat(文字列)	文字列の先頭から小数点を含む数値として解釈できる部分までを変換します。
Number(文字列)	文字列全体を厳密に数値に変換します。数値として解釈できない文字が含まれている場合は『NaN』を返します。

サンプルコード

// parseInt() は先頭から整数として読める部分を変換します。
console.log(parseInt("42px")); // 『42』と出力されます。
console.log(parseInt("3.14")); // 『3』と出力されます。小数部分は切り捨てられます。
console.log(parseInt("abc")); // 『NaN』と出力されます。数値に変換できません。

// 基数を指定して変換します。
console.log(parseInt("ff", 16)); // 『255』と出力されます。16進数として解釈されます。
console.log(parseInt("1010", 2)); // 『10』と出力されます。2進数として解釈されます。

// parseFloat() は小数点を含む数値を変換します。
console.log(parseFloat("3.14")); // 『3.14』と出力されます。
console.log(parseFloat("100.5px")); // 『100.5』と出力されます。

// Number() は文字列全体を厳密に変換します。
console.log(Number("42")); // 『42』と出力されます。
console.log(Number("3.14")); // 『3.14』と出力されます。
console.log(Number("42px")); // 『NaN』と出力されます。文字列全体が数値でないため変換できません。
console.log(Number("")); // 『0』と出力されます。空文字列は0になります。
console.log(Number(true)); // 『1』と出力されます。trueは1に変換されます。

概要

JavaScriptで文字列を数値に変換する方法は主に3つあります。『parseInt()』は文字列の先頭から整数として読める部分だけを変換するため、『"42px"』のようにCSSの値から数値部分を抽出したい場合に便利です。第2引数の基数を省略すると通常10進数として解釈されますが、混乱を避けるために常に基数を指定することが推奨されています。

『parseFloat()』は『parseInt()』と同様に先頭から読める部分だけを変換しますが、小数点を含む数値も正しく変換できます。一方で『Number()』は文字列全体が数値として有効でなければ『NaN』を返すため、ユーザー入力のバリデーションなど厳密な変換が必要な場面に適しています。

なお、加算演算子『+』を使った『+"42"』という書き方でも『Number()』と同じ結果が得られますが、コードの意図がわかりにくくなるため、明示的に『Number()』を使うことをおすすめします。