原文: How to Convert a String to a Number in JavaScript
JavaScript では、文字列を数値に変換する方法がたくさんあります。それぞれコードではどのように書くのでしょうか？
この記事では、文字列を数値に変換する 11 の方法を紹介します。
こちらは、JavaScript で文字列を数値に変換する方法を示すインタラクティブなスクリーンです:
JavaScript で文字列を数値に変換する方法: Number() 関数を使用する
文字列を数値に変換する方法の一つは、Number() 関数を使用することです。
この例では、quantity という名前の文字列があり、その値は "12" です。
const quantity = "12";
typeof 演算子を quantity に使用すると、その型は string として返されます。
console.log(typeof quantity);
Number 関数を使って、quantity を次のように数値に変換できます:
Number(quantity)再び typeof 演算子を使用して、それが数値になったことを確認できます。
console.log(typeof Number(quantity));
数値に変換できない値を渡そうとすると、返り値は NaN「Not a Number」になります。
console.log(Number("awesome"));
JavaScript で文字列を数値に変換する方法: parseInt() 関数を使用する
文字列を数値に変換するもう一つの方法は、parseInt() 関数を使用することです。この関数は文字列とオプションの基数 (radix) を受け取ります。
基数は、記数法の底を表す 2 から 36 の間の数値です。例えば、基数が 2 の場合は 2 進数を表し、基数が 10 の場合は 10 進数を表します。
先ほどの quantity 変数を使用して、その文字列を数値に変換することができます。
const quantity = "12";
console.log(parseInt(quantity, 10));quantity 変数を "12.99" に変更した場合、parseInt() を使用して得られる結果は数値の 12.99 になるでしょうか？
ご覧のとおり、結果は丸められた整数になります。浮動小数点数を返したい場合は、parseFloat() を使用する必要があります。
JavaScript で文字列を数値に変換する方法: parseFloat() 関数を使用する
parseFloat() 関数は値を受け取り、浮動小数点数を返します。浮動小数点数の例としては、12.99 や 3.14 などがあります。
以前の例を修正して parseFloat() を使用すると、結果は浮動小数点数の 12.99 になります。
const quantity = "12.99";
console.log(parseFloat(quantity));
文字列に先頭または末尾の空白が含まれていても、parseFloat() はその文字列を浮動小数点数に変換します。
const quantity = " 12.99 ";
console.log(parseFloat(quantity));
文字列の最初の文字が数値に変換できない場合、parseFloat() は NaN を返します。
const quantity = "F12.99";
console.log(parseFloat(quantity));
JavaScript で文字列を数値に変換する方法: 単項プラス演算子 (+) を使用する
単項プラス演算子 (+) を使用すると、文字列を数値に変換できます。この演算子はオペランドの前に置かれます。
const quantity = "12";
console.log(+quantity);
単項プラス演算子 (+) を使用して、文字列を浮動小数点数に変換することもできます。
const quantity = "12.99";
console.log(+quantity);
文字列の値が数値に変換できない場合、結果は NaN になります。
const quantity = "awesome";
console.log(+quantity);
JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 と掛け算する
文字列を数値に変換する別の方法は、基本的な数学演算を使用することです。文字列の値に 1 を掛けると、数値が返されます。
const quantity = "12";
console.log(quantity * 1);
ご覧のとおり、quantity の値に 1 を掛けると、数値の 12 が返されます。しかし、これはどのように機能するのでしょうか？
この例では、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行しています。文字列が数値に変換できない場合、数学演算は機能せず、NaN が返されます。
const quantity = "awesome";
console.log(quantity * 1);
この方法は浮動小数点数にも適用できます。
const quantity = "10.5";
console.log(quantity * 1);
JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 で割る
1 を掛ける代わりに、文字列を 1 で割ることもできます。JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。
const quantity = "10.5";
console.log(quantity / 1);
JavaScript で文字列を数値に変換する方法: 文字列から数値の 0 を引く
別の方法として、文字列から 0 を引くこともできます。この場合も同様に、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。
const quantity = "19";
console.log(quantity - 0);
JavaScript で文字列を数値に変換する方法: ビット単位の NOT 演算子 (~) を使用する
ビット単位の NOT 演算子 (~) はオペランドのビットを反転させ、その値を 32 ビット符号付き整数に変換します。32 ビット符号付き整数は、32 ビット (または 4 バイト) で表される整数値です。
数値に対して 1 つのビット単位の NOT 演算子 (~) を使用すると、以下の操作が実行されます: -(x + 1)
console.log(~19);
しかし、ビット単位の NOT 演算子 (~) を 2 回使用すると、文字列を数値に変換することができます。
const quantity = "19";
console.log(~~quantity);
この方法は浮動小数点数には適用できません。結果は整数になるためです。
const quantity = "19.99";
console.log(~~quantity);
この方法を数値以外の文字に対して使用した場合、結果はゼロになります。
const quantity = "awesome";
console.log(~~quantity);
この方法には制限があり、非常に大きな値の場合には動作が不安定になることがあります。数値が 32 ビット符号付き整数の範囲内に収まっていることを確認することが重要です。
const quantity = "2700000000";
console.log(~~quantity);
ビット単位の NOT 演算子 (~) について詳しく知りたい場合は、ドキュメントを参照してください。
JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する
文字列を数値に変換する方法として、他には Math.floor() 関数も使用できます。この関数は数値を最も近い整数に切り捨てます。
const quantity = "13.4";
console.log(Math.floor(quantity));
以前の例と同様に、数値以外の文字を使用しようとすると、結果は NaN になります。
const quantity = "awesome";
console.log(Math.floor(quantity));
JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する
Math.ceil() 関数は、数値を最も近い整数に切り上げます。
const quantity = "7.18";
console.log(Math.ceil(quantity));
JavaScript で文字列を数値に変換する方法: Math.round() 関数を使用する
Math.round() 関数は、数値を最も近い整数に丸めます。
例えば、値が 6.3 の場合、Math.round() は 6 を返します。
const quantity = "6.3";
console.log(Math.round(quantity));
しかし、その値を 6.5 に変更すると、Math.round() は 7 を返します。
const quantity = "6.5";
console.log(Math.round(quantity));
結論
この記事では、JavaScript を使用して文字列を数値に変換する 11 の方法を紹介しました。
この記事で説明した 11 の方法は以下の通りです。
Number()関数を使用するparseInt()関数を使用するparseFloat()関数を使用する- 単項プラス演算子 (
+) を使用する - 文字列に数値の 1 を掛ける
- 文字列を数値の 1 で割る
- 文字列から数値の 0 を引く
- ビット単位の NOT 演算子 (
~) を使用する Math.floor()関数を使用するMath.ceil()関数を使用するMath.round()関数を使用する
この記事を楽しんでいただけたなら幸いです。JavaScript の学習、頑張ってください！