2026.01.28

【JavaScript】3つの方法で文字列を数値に変換（Number/parseInt/parseFloat）

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『文字列から数値への変換』について、『Number』『parseInt』『parseFloat』の3つの方法」を紹介します。

こんな人にオススメ

JavaScriptにおける『文字列から数値への変換方法』を知りたい
『Numberオブジェクト』『parseIntメソッド』『parseFloatメソッド』の記載方法を知りたい

ぜひ本記事を参考にしてください。

Contents

『文字列から数値への変換』って実務でどんな時に使う？
文字列を数値に変換①（Numberオブジェクト）
文字列を数値に変換②（parseIntメソッド）
文字列を数値に変換③（parseFloatメソッド）
まとめ

『文字列から数値への変換』って実務でどんな時に使う？

ではこれから、『文字列から数値への変換する方法』を紹介していくのですが、そもそもこれってどのような時に使うのでしょうか？

まずはそこからイメージを固めていきましょう。

入力フォームなどで、数値だけを「確実に」取り出したい
- ECサイトの金額計算
表示された文字列から数字部分だけを取り出したい
- 「200px」→「200」、「40%」→「40」

こんな時に使えるようですね。

確かに、「数値」でなければならない場面って「金額」や「数量」など多々ありそうなので、そんなときにつかえるのかもしれませんね。

では改めて、「文字列を数値に変換する方法」をそれぞれ見ていきましょう。

文字列を数値に変換①（Numberオブジェクト）

文字列を数値に変換する方法の一つ目として、『Numberオブジェクト』です。

記載方法はこんな感じ↓

//記載方法

Number(変換する文字列)

//記載方法

Number(変換する文字列)

Numberオブジェクトの特徴として変換したい対象が数字のみの場合に数値に変換することができます。

どういうことか分かりづらいと思うので、記載例で見ていきましょう。

let test1 = "1.23";
let test2 = "1.23*";
let test3 = "123*";
let test4 = "*123";

console.log(Number(test1));
//実行結果：1.23

console.log(Number(test2));
//実行結果：NaN

console.log(Number(test3));
//実行結果：NaN

console.log(Number(test4));
//実行結果：NaN

let test1 = "1.23";
let test2 = "1.23*";
let test3 = "123*";
let test4 = "*123";

console.log(Number(test1));
//実行結果：1.23

console.log(Number(test2));
//実行結果：NaN

console.log(Number(test3));
//実行結果：NaN

console.log(Number(test4));
//実行結果：NaN

数字以外の文字列が含まれる場合には、すべて『NaN』を返していることが分かりますね。

つまり、Numberオブジェクトでは、「文字列が入っていたらダメだよー」ということが分かりました。

文字列を数値に変換②（parseIntメソッド）

続けて、文字列を数値に変換する方法の二つ目として、『parseIntメソッド』を使用します。

parseIntメソッドの特徴として、文字列と数値混在の場合、数値として解析できる部分だけを取り込むことができます。
これはテキストだけでは分かりづらいので↓の記載例を見てください。

記載方法を見ていきましょう。

//記載方法

parseInt(変換する文字列)

//記載方法

parseInt(変換する文字列)

続けて、以下が記載例です。

let test1 = "1.23";
let test2 = "1.23*";
let test3 = "123*";
let test4 = "*123";

console.log(parseInt(test1));
//実行結果：1

console.log(parseInt(test2));
//実行結果：1

console.log(parseInt(test3));
//実行結果：123

console.log(parseInt(test4));
//実行結果：NaN

let test1 = "1.23";
let test2 = "1.23*";
let test3 = "123*";
let test4 = "*123";

console.log(parseInt(test1));
//実行結果：1

console.log(parseInt(test2));
//実行結果：1

console.log(parseInt(test3));
//実行結果：123

console.log(parseInt(test4));
//実行結果：NaN

四つ目の例のように、変換したい文字列の先頭が文字列の場合は『NaN』を返していますが、その他は数値が返されています。

また、整数に変換するため、小数点以下が含まれる場合は切り捨てし、整数として実行していることも特徴です。

文字列を数値に変換③（parseFloatメソッド）

最期に、文字列を数値に変換する方法の三つ目として、『parseFloatメソッド』を使用します。

parseFloatメソッドも、parseIntメソッド同様、文字列と数値混在の場合、数値として解析できる部分だけを取り込むことができます。

ただし、parseFloatメソッドは小数点も返すことができる点が異なります。

こちらも記載方法を見ていきましょう。

//記載方法

parseFloat(変換する文字列)

//記載方法

parseFloat(変換する文字列)

以下が記載例です。

let test1 = "1.23";
let test2 = "1.23*";
let test3 = "123*";
let test4 = "*123";

console.log(parseFloat(test1));
//実行結果：1.23

console.log(parseFloat(test2));
//実行結果：1.23

console.log(parseFloat(test3));
//実行結果：123

console.log(parseFloat(test4));
//実行結果：NaN

let test1 = "1.23";
let test2 = "1.23*";
let test3 = "123*";
let test4 = "*123";

console.log(parseFloat(test1));
//実行結果：1.23

console.log(parseFloat(test2));
//実行結果：1.23

console.log(parseFloat(test3));
//実行結果：123

console.log(parseFloat(test4));
//実行結果：NaN