parseInt() / parseFloat() / Number()

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

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

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

// 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に変換されます。

42       // parseInt("42px")
3        // parseInt("3.14")
NaN      // parseInt("abc")
255      // parseInt("ff", 16)
10       // parseInt("1010", 2)
3.14     // parseFloat("3.14")
100.5    // parseFloat("100.5px")
42       // Number("42")
3.14     // Number("3.14")
NaN      // Number("42px")
0        // Number("")
1        // Number(true)

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

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

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