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

JavaScript

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

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

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

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

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) NaN undefinedはNaNになる
Number(“”) 0 空文字列の場合は0になる
Number(null) 0 nullの場合は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

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) NaN undefinedはNaNになる
parseInt(“”) NaN 空文字列の場合はNaNになる
parseInt(null) NaN nullの場合は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) NaN undefinedはNaNになる
parseFloat(“”) NaN 空文字列の場合はNaNになる
parseFloat(null) NaN nullの場合はNaNになる

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

コメント

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