JavaScriptで「文字列から数値」に変換する方法について書いています。
変換するサンプルコードと一緒に解説しています。
文字列を数値に変換する時には下記を使います。
・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では…
・空文字列を渡すとNaNになる
・数値が先頭にある文字列を渡すと、先頭数値が抜き出される(“365日が1年です” => 365)
Numberでは…
・空文字を渡すと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と同じでした。
コメント