JavaScript 文字列と数値の変換(parseInt/String)

JavaScriptの文字列と数値の変換のサンプルです。

文字列→数値	文字列を数値に変換する(parseInt)
	文字列を数値に変換する(Number関数)
数値→文字列	数値を文字列に変換する(String関数)
データ型	データ型を調べる(typeof演算子)

文字列を数値に変換する(parseInt)

parseInt(文字列, 基数);

文字列を数値にして返します。
→parseInt(2.5,10)は、2になるので注意します。
1つめの引数は数値に変換する文字列を指定します。
2つめの引数は、10を指定すると文字列を10進数とみなし、数値変換時に10進数の数値にします。意図しない動作を防ぐため指定したほうが良いです。

<script>
    const a = "09";
    console.log(parseInt(a,10)); //9 (2つめの引数の10は10進数を表す)
    console.log(typeof parseInt(a,10)); //number

    const b = "-5";
    console.log(parseInt(b,10)); //-5 (マイナス可)
    console.log(typeof parseInt(b,10)); //number

    const c = "100";
    console.log(parseInt(c,8)); //64 (8進数の100を10進数に変換)

    const d = "100";
    console.log(parseInt(d,16)); //256 (16進数の100を10進数に変換)

    const e = "2.5";
    console.log(parseInt(e,10)); //2 (整数のみになる)

    const f = "010kg";
    console.log(parseInt(f,10)); //10 (文字列の前までを数値とする)

    const g = "あいう";
    console.log(parseInt(g,10)); //NaN
</script>

20行目は、数値と文字が入っていた場合です。文字列の前までを数値として変換します。
エラーにならないので注意が必要です。
23行目は、すべて文字の場合です。NaNになります。
NaNとは非数値です。(Not a Number)

文字列を数値に変換する(Number関数)

Number(2.5)は、2.5になります。
→parseInt(2.5,10)は、2になります。

<script>
    const a = "09";
    console.log(Number(a)); //9 (数値に変換)
    console.log(typeof(Number(a))); //number
    
    const b = "-5";
    console.log(Number(b)); //-5 (マイナス可)
    console.log(typeof(Number(b))); //number

    const c = "2.5";
    console.log(Number(c)); //2.5 (parseIntと異なり小数点以下も表示)

    const d = "010kg";
    console.log(Number(d)); //NaN (数値と文字が入っていた場合はNaN)

    const e = "あいう";
    console.log(Number(e)); //NaN
</script>

14行目は、数値と文字が入っていた場合です。parseIntと異なりNaNになります。
NaNとは非数値です。(Not a Number)
17行目は、すべて文字の場合です。NaNになります。

数値を文字列に変換する(String関数)

<script>
    const a = 100;
    console.log(String(100)); //100
    console.log(typeof(String(100))); //string
</script>

3行目は、String関数で数値を文字列にキャストしています。

数値を文字列に変換する(+演算子)

<script>
const a = 100 + "";
console.log(typeof(a)); //string
</script>

+演算子の使用で数値は文字列になります。

以下は、MDNのparseIntのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt

データ型を調べる(typeof演算子)

typeof operand

typeof演算子は、データ型を調べることができます。
戻り値は、データ型を示す文字列を返します。

<script>

console.log(typeof 100); //number

console.log(typeof "100"); //string

</script>

3行目は、数値型なのでnumberと表示されます。
5行目は、文字列型なのでstringと表示されます。

以下は、MDNのtypeof演算子のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof