JavaScriptで文字列から数値に変換する3つの方法！

JavaScriptで「文字列から数値」に変換する方法について書いています。
変換するサンプルコードと一緒に解説しています。

文字列を数値に変換する時には下記を使います。

それでは、詳しくみていきましょう。

Numberオブジェクトを使って変換する

Numberを使うことで、文字列から数値に変換することが可能です。
例えば、下記のように使用します。

let value = Number("100")

console.log(typeof(value)) // number
console.log(value + 50) // 150

Numberに数値の文字列を渡すことで、数値に変換できます。
今回のコードでは、文字列の”100″を渡して、数値に変換しました。
変換した数値がvalue変数に入ります。

typeofを使って、型が何になっているか確認するとnumberが出力されました。
数値になっています。
数値なので「value + 50」を計算して出力すると「150」が出力されました。

Numberオブジェクトでいろいろな値を変換する

Numberを使って、いろいろな値を変換して表にしてみました。

文字列の”apple”やundefinedなど、数値に変換できない場合はNaNになりました。
空文字を渡した場合やnullを渡した時には0になりました。

算術演算子を使うと、自動で変換される

文字列の数値を、プラス演算子(+)以外の算術演算子を使って計算します。
その場合は自動で変換されます。

例えば、下記のようなコードです。

let number1 = "100" * "20"
console.log(number1) // 2000

let number2 = "100" / "20"
console.log(number2) // 5

let number3 = "100" - "20"
console.log(number3) // 80

let numberText = "100" + "20"
console.log(numberText) // 10020

number1変数に文字列の”100″と”20″を掛けた値を代入しました。
自動で数値として扱われて、結果が2000になります。

number2変数に文字列の”100″と”20″を割った値を代入しました。
これも自動で数値になり、結果が5になります。

number3変数に文字列の”100″と”20″を引いた値を代入しました。
こちらも自動で数値になり、結果が80になります。

numberText変数には文字列の”100″と”20″を足すようにして代入しています。
これは文字列の結合として扱われて、結果が「10020」となってしまいます。
こうなることを回避するためには、先ほどのNumberなどを使用して、事前に数値化する必要があります。

let numberText = Number("100") + Number("20")
console.log(numberText) // 120

parseInt関数で変換する

parseInt関数を使用することでも変換可能です。
例えば、下記のように使います。

let value = parseInt("999")

console.log(typeof(value)) // number
console.log(value + 1) // 1000

上記コードでは、文字列の”999″をparseInt関数に渡して、数値に変換しました。
変換した数値がvalue変数に入ります。

typeofを使って、型を確認するとnumberになっていることが確認できます。
数値なので「value + 1」を計算して出力すると「1000」が出力されました。

parseInt関数でいろいろな値を変換する

parseInt関数で、いろいろな値を変換して表にしてみました。

Numberオブジェクトを使った時との違いは？

parseIntを使ったときと、Numberオブジェクトを使用した時との違いは下記になります。

parseIntでは…

Numberでは…

parseFloat関数で変換する

parseFloat関数を使用することでも変換することができます。
parseInt関数と違うところは、parseFloatを使うと少数はそのまま少数になります。

例えば、下記のように使用します。

let number = "3.14"
let numberFloat = parseFloat(number)
let numberInt = parseInt(number)

console.log(numberFloat) // 3.14
console.log(numberInt) // 3

number変数に”3.14″という少数の文字列を代入しました。
numberFloat変数に、parseFloat関数でnumberを変換して、代入しています。
numberInt変数には、parseInt関数でnumberを変換して、代入しています。

結果、parseFloat関数で変換した場合には3.14が出力されます。
parseInt関数を使用した場合は少数が省かれて3になりました。

parseFloat関数でいろいろな値を変換する

parseFloat関数で、いろいろな値を変換して表にしてみました。

少数の”120.11″が、そのまま120.11になる以外の挙動はparseIntと同じでした。