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

JavaScript

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

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

・Numberオブジェクト
・parseInt関数
・parseFloat関数

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

PR

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を使って、いろいろな値を変換して表にしてみました。

変換コード変換後内容
Number(“999”)999文字列”999″を数値の999に変換
Number(” 999 “)999文字列の数値の前後にスペースがあっても大丈夫
Number(“120.11”)120.11文字列の少数”120.11″を数値の120.11に変換
Number(“apple”)NaN文字列の場合はNaNになる
Number(undefined)NaNundefinedはNaNになる
Number(“”)0空文字列の場合は0になる
Number(null)0nullの場合は0になる

文字列の”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
PR

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関数で、いろいろな値を変換して表にしてみました。

変換コード変換後内容
parseInt(“999”)999文字列”999″を数値の999に変換
parseInt(” 999 “)999文字列の数値の前後にスペースがあっても大丈夫
parseInt(“120.11”)120文字列の少数”120.11″は少数部がなくなって120に
parseInt(“apple”)NaN文字列の場合はNaNになる
parseInt(“365日が1年です”)365先頭が数値の文字列は、先頭が抜き出されて数値になる
parseInt(undefined)NaNundefinedはNaNになる
parseInt(“”)NaN空文字列の場合はNaNになる
parseInt(null)NaNnullの場合はNaNになる

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

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

parseIntでは…

・少数を渡した時に整数になる(“120.11” => 120)
・空文字列を渡すとNaNになる
・数値が先頭にある文字列を渡すと、先頭数値が抜き出される(“365日が1年です” => 365)

Numberでは…

・少数を渡すと、そのまま少数部が残る(“120.11” => 120.11)
・空文字を渡すと0になる
・数値が先頭にある文字列でもNaNになる(“365日が1年です” => NaN)

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関数で、いろいろな値を変換して表にしてみました。

変換コード変換後内容
parseFloat(“999”)999文字列”999″を数値の999に変換
parseFloat(” 999 “)999文字列の数値の前後にスペースがあっても大丈夫
parseFloat(“120.11”)120.11文字列の少数”120.11″は、少数120.11に
parseFloat(“apple”)NaN文字列の場合はNaNになる
parseFloat(“365日が1年です”)365先頭が数値の文字列は、先頭が抜き出されて数値になる
parseFloat(undefined)NaNundefinedはNaNになる
parseFloat(“”)NaN空文字列の場合はNaNになる
parseFloat(null)NaNnullの場合はNaNになる

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

コメント

タイトルとURLをコピーしました