【JavaScript】文字列から数値に変換する方法

JavaScriptで数字を扱う際、文字列から数値に変換したい場合があります。
本記事では、JavaScriptで文字列から数値に変換する方法を紹介します。

JavaScriptでは、以下の4つの方法で文字列から数値に変換することができます。
また、小数点や長い文字列など色々な値を利用した結果を検証してみました。
検証用のコードは以下となります。

[
  "12345678901234567890",   // 大きい桁数
  "abc",                    // 数字以外
  "-12345",                 // マイナス
  "123.45",                 // 小数点
  "0.12345678901234567890", // 長い小数点
  "1.2345.67890",          // 不正な数値
].map(e => console.log(e, /* ここに変換用のコードを記載 */))

文字列から数値に変換する方法

Numberを使った変換

文字列をNumber関数に渡すことで、数値に変換することができます。
以下は、Number関数を使った変換の例です。

const str = "123";
const num = Number(str);
console.log(num); // 123

検証結果

parseIntを使った変換

文字列をparseInt関数に渡すことで、整数に変換することができます。
以下は、parseInt関数を使った変換の例です。

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

検証結果

parseFloatを使った変換

文字列をparseFloat関数に渡すことで、小数に変換することができます。
以下は、parseFloat関数を使った変換の例です。

const str = "123.45";
const num = parseFloat(str);
console.log(num); // 123.45

検証結果

単項プラス演算子を使った変換

文字列の先頭に+をつけることで、数値に変換することができます。
以下は、単項プラス演算子を使った変換の例です。

const str = "123";
const num = +str;
console.log(num); // 123

検証結果

各方法の比較

検証結果ではparseIntとparseFloatは可能な限り変換しようとしています。
対して、Numberや単項プラス演算子は不正なものをちゃんと判断してくれ、意図しない変換をすることを防いでくれます。

また、単項プラス演算子は記述が非常に簡単なため、コードが簡潔になり、見通しが良くなります。

まとめ

本記事では、JavaScriptで文字列から数値に変換する方法を紹介しました。
Number、parseInt、parseFloat、単項プラス演算子の4つの方法を紹介し、それぞれの特徴や注意点について説明しました。
文字列を数値に変換する際には、予期せぬ結果にならないよう、期待する結果をによって使い分けるようにしましょう。