文字列になった数字を数値に変換する方法

文字列の数字を数値に変換したい時の方法

const userInput = ‘10’

上記のようなuserInput変数に格納された数字文字列の10を数値に変換して数値を足したい時

const userInput = "10";
let result;
result = userInput + 10;
console.log(result);

//1010

文字列10に数値の10を足して20にしたいが今の文字列のまま+10を足すと1010になってしまう
jsの内部で数値が文字列に変換されて語尾にくっつく形になって上記のような結果になってしまう。

Numberメソッド

const userInput = "10";
let result;
result = Number(userInput) + 10;
console.log(result);

//20

Numberメソッドに引数で文字列の10を渡してあげるとNumberメソッドが数値に変換してくれて
数値の計算をすることができる。

parseIntメソッド

const userInput = "10";
let result;
result = parseInt(userInput) + 10;
console.log(result);

Numberと同じ結果になるがparseIntの引数に渡ってくる変数の中身に小数点が含まれているとInt
型の数値に変換される為小数点部分は省かれてしまう

const userInput = "10.9";
let result;
result = parseInt(userInput) + 10;
console.log(result);

//20　#小数点部分は省かれる

最も簡単に変換する方法

const userInput = "10";
result = +userInput + 10;
console.log(result);

文字列の変数に対して頭に+をつけるとそれだけで内部の数字文字列が変換されて上で書いてきた結果と同じ挙動をする。
めちゃめちゃ短くて便利だが明示てきにどのような処理なのかがぱっと見では判断できないので
NumberメソッドやparseIntメソッドを使用した方がわかりやすいと思った

これらのメソッドに対してstringu型の引数を渡してしまうとNaNになる