JavaScriptでよく使う型の変換3選を紹介【String, Number,parseInt】

脱初心者になるための一歩として、プログラミングではデータの型を意識することが大切です。

実際の作業でもデータ型を変換する場面がよくあります。

例えば、文字列から数字に変換することや、反対に数字を文字列に変換したい場面などです。

今回はJavaScriptでよく使う型の変換を紹介します。

動画もあるのでお好みで使って頂ければと思います。

JavaScriptで型を変換する方法

まずJavaScriptでは型の変換に専用のメソッドが用意されているのですが、「何に変換するか」で使うメソッドがバラバラです。

その中でもよく使うものを紹介していきます。

まずは文字列を数字に変換するパターンです。

例えば以下のような文字列があったとします。

let num1 = "0001";
console.log(num1); // 「0001」と出力される

「0001」と出力されて問題はなさそうに見えるのですが計算する時に困ります。

let num1 = "0001";
// ここを追加
console.log(num1 + 2);
console.log(num1); // 「00012」と出力される

数字の足し算をしたいのですが「1+2=3」ではなく「00012」となってしまいました。

プログラミングの世界では文字列はあくまで文字であって数字ではないので上記のように足し算をすると「文字同士の合体」になってしまうからです。

初学者の方にはなかなか理解しづらいかもしれませんが、このような状況には型の変換をする必要があるんです。

let num1 = "0001";
// ここを追加
num1 = Number(num1);
console.log(num1 + 2);
console.log(num1); // 「3」と出力される

「数字に変換したい」という時にはNumber( )というメソッドを使います。

引数に変換したいデータを変数などで指定することで数字に変換してくれます。

変数num1はもともと文字だったのですが数字に変換されたので足し算をすることができるようになりました。

今度は逆に数字を文字列に変換するパターンを紹介します。

実務では数字を組み合わせてidやユーザー番号などを設定することがあり、こういうケースでは先ほどと違って「文字同士の合体」をしたいわけなんです。

let num2 = 100;
console.log(num2 + 200);　// 「300」と出力される

上記の場合、変数num2は100で数字であるため足し算をすると数字としての足し算が実行されます。

これを数字として足すのではなく「100200」のように文字の合体をするには文字列へ変換することになります。

let num2 = 100;
// ここを追加
num2 = String(num2);
console.log(num2 + 200); // 「100200」と出力される

文字列への変換ではString( )というメソッドがあり、引数に変数などのデータを指定することで文字列に変換してくれます。

さらに実務でよくあるのが小数点のある数字を整数にしたいパターンです。

プログラミングの世界では「数字」と言った場合に、「小数点あり」「小数点なし（整数）」の2種類に分類されるためです。

let num3 = 12.4;
console.log(num3); // 「12.4」と出力される

小数点がついている数字を整数に変換するには以下のようにします。

let num3 = 12.4;
// ここを追加
num3 = parseInt(num3);
console.log(num3); // 「12」と出力される

JavaScriptではparseInt( )というメソッドがあり、引数に小数点がついている数字を指定することで整数に変換してくれます。

こちらもよく使うので覚えておきましょう。

ちなみにデータの型を調べる方法についても紹介しておきます。

JavaScriptではtypeofを使うことでデータの型を調べることができます。

let num2 = 100;
console.log(typeof num2); // 「number」と出力される

例えば変数num2を先ほどやったように文字列に変換してみます。

let num2 = 100;
num2 = String(num2);
console.log(typeof num2); // 「string」と出力される

このように型を変換した場合には変換した後の型が出力されます。

ちなみにですがコンソールで確認する場合だと以下のような方法でも型の確認が可能です。

let num2 = 100;
console.log(num2 === 100); // 「true」と出力される
console.log(num2 === "100"); // 「false」と出力される

上記の場合だと数字の100と等しく、文字列の100とは等しくないので変数num2は数字であることが分かります。

こんな感じで型の変換をしていくうちに「今の型って何になってるんだっけ？」となることがあるので、型の確認方法も一緒に使えるようになっておきましょう。