+演算子を使用した文字列から数値への変換
JavaScriptでは、+演算子を使用して文字列を数値に変換することができます。これは、+演算子が数値の加算と文字列の連結の両方を行うためです。しかし、+演算子が数値と文字列の間で使用されると、JavaScriptは自動的に数値を文字列に変換し、それらを連結します。
したがって、+演算子を使用して文字列を数値に変換するには、単項プラス+を使用します。これは、オペランド（演算子が作用する値）が1つだけである演算子です。単項プラスは、そのオペランドを数値に変換します。
例えば：
let str = "123";
let num = +str;
console.log(num); // 123
console.log(typeof num); // "number"
このコードでは、+strは文字列strを数値に変換します。その結果、numは数値123を持ち、typeof numは"number"を返します。
ただし、文字列が数値に変換できない場合、この方法はNaN（Not a Number）を返します。
let str = "hello";
let num = +str;
console.log(num); // NaN
このコードでは、+strは文字列strを数値に変換しようとしますが、"hello"は数値に変換できないため、numはNaNを持ちます。このような場合、isNaN関数を使用して結果がNaNであるかどうかをチェックできます。
let str = "hello";
let num = +str;
console.log(isNaN(num)); // true
このコードはtrueを出力します。これは、numがNaNであることを示しています。したがって、+演算子を使用して文字列を数値に変換するときは、結果がNaNでないことを確認することが重要です。これは、isNaN関数を使用して行うことができます。この関数は、その引数がNaNである場合にtrueを返し、それ以外の場合にfalseを返します。このように、+演算子を使用して文字列を数値に変換することは、JavaScriptにおける非常に便利なテクニックです。ただし、その結果が有効な数値であることを確認することが重要です。それができない場合は、他の方法（例えば、parseIntやparseFloat関数）を使用することを検討してみてください。
parseIntとparseFloatを使用した文字列から数値への変換
JavaScriptでは、parseIntとparseFloat関数を使用して文字列を数値に変換することができます。これらの関数は、文字列を引数として受け取り、それを整数（parseInt）または浮動小数点数（parseFloat）に変換します。
parseInt
parseInt関数は、文字列を整数に変換します。この関数は、文字列の最初の数字を見つけるところから始め、数字が続く限り解析を続けます。数字以外の文字を見つけると、解析を停止し、それまでに解析した数字を整数として返します。
例えば：
let str = "123px";
let num = parseInt(str);
console.log(num); // 123
console.log(typeof num); // "number"
このコードでは、parseInt(str)は文字列strを整数に変換します。その結果、numは整数123を持ち、typeof numは"number"を返します。
ただし、文字列が数字で始まらない場合、parseIntはNaNを返します。
let str = "px123";
let num = parseInt(str);
console.log(num); // NaN
このコードでは、parseInt(str)は文字列strを整数に変換しようとしますが、"px123"は数字で始まらないため、numはNaNを持ちます。
parseFloat
parseFloat関数は、文字列を浮動小数点数に変換します。この関数は、parseIntと同様に動作しますが、小数点を含む数字も解析します。
例えば：
let str = "123.45px";
let num = parseFloat(str);
console.log(num); // 123.45
console.log(typeof num); // "number"
このコードでは、parseFloat(str)は文字列strを浮動小数点数に変換します。その結果、numは浮動小数点数123.45を持ち、typeof numは"number"を返します。
同様に、文字列が数字で始まらない場合、parseFloatはNaNを返します。
let str = "px123.45";
let num = parseFloat(str);
console.log(num); // NaN
このコードでは、parseFloat(str)は文字列strを浮動小数点数に変換しようとしますが、"px123.45"は数字で始まらないため、numはNaNを持ちます。
したがって、parseIntとparseFloatを使用して文字列を数値に変換するときは、結果がNaNでないことを確認することが重要です。これは、isNaN関数を使用して行うことができます。この関数は、その引数がNaNである場合にtrueを返し、それ以外の場合にfalseを返します。このように、parseIntとparseFloatは、文字列を数値に変換するための非常に便利な関数です。ただし、その結果が有効な数値であることを確認することが重要です。それができない場合は、他の方法（例えば、+演算子）を使用することを検討してみてください。
数学演算子を文字列から変換する方法
JavaScriptでは、数学演算子を使用して文字列を数値に変換することができます。これは、JavaScriptが数学演算子を適用する前に自動的に型変換を行うためです。この型変換は、文字列が数値に変換できる場合にのみ行われます。
例えば、以下のコードを見てみましょう：
let str = "123";
let num = str * 1;
console.log(num); // 123
console.log(typeof num); // "number"
このコードでは、str * 1は文字列strを数値に変換します。その結果、numは数値123を持ち、typeof numは"number"を返します。
同様に、-（減算）、/（除算）、%（剰余）などの他の数学演算子も同様に動作します。
let str = "123";
let num1 = str - 0;
let num2 = str / 1;
let num3 = str % 1;
console.log(num1); // 123
console.log(typeof num1); // "number"
console.log(num2); // 123
console.log(typeof num2); // "number"
console.log(num3); // 0
console.log(typeof num3); // "number"
ただし、文字列が数値に変換できない場合、この方法はNaN（Not a Number）を返します。
let str = "hello";
let num = str * 1;
console.log(num); // NaN
このコードでは、str * 1は文字列strを数値に変換しようとしますが、"hello"は数値に変換できないため、numはNaNを持ちます。このような場合、isNaN関数を使用して結果がNaNであるかどうかをチェックできます。
let str = "hello";
let num = str * 1;
console.log(isNaN(num)); // true
このコードはtrueを出力します。これは、numがNaNであることを示しています。したがって、数学演算子を使用して文字列を数値に変換するときは、結果がNaNでないことを確認することが重要です。これは、isNaN関数を使用して行うことができます。この関数は、その引数がNaNである場合にtrueを返し、それ以外の場合にfalseを返します。このように、数学演算子を使用して文字列を数値に変換することは、JavaScriptにおける非常に便利なテクニックです。ただし、その結果が有効な数値であることを確認することが重要です。それができない場合は、他の方法（例えば、+演算子、parseIntやparseFloat関数）を使用することを検討してみてください。