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

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

目次

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

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

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

parseInt関数で文字列を数値に変換するサンプルです。

<script>
    const a = "09";
    console.log(parseInt(a,10)); //9
    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

    const d = "100";
    console.log(parseInt(d,16)); //256

    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>

3行目は、対象の文字列を10進数の数値として数値に変換しています。
7行目は、マイナスの数値にしています。
11行目は、対象の文字列を8進数の100として10進数の数値に変換しています。
14行目は、対象の文字列を16進数の100として10進数の数値に変換しています。

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

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

Number関数で文字列を数値に変換するサンプルです。

<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

    const d = "010kg";
    console.log(Number(d)); //NaN

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

3行目は、対象の文字列を数値に変換しています。
7行目は、マイナスの値を変換しています。
11行目は、小数ありの場合です。parseIntと異なり小数点以下も表示されます。
14行目は、数値と文字が入っていた場合です。parseIntと異なりNaNになります。
NaNとは非数値です。(Not a Number)
17行目は、すべて文字の場合です。NaNになります。

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

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演算子は、データ型を調べることができます。
  • 戻り値は、データ型を示す文字列を返します。

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

関連の記事

JavaScript if文のサンプル
JavaScript if文の == と === の違い
JavaScriptのデータ型とデータ型を調べる方法

△上に戻る