はじめに
この記事を読むことで、JavaScriptの型変換を使いこなすことができるようになります。
JavaScriptは、動的型付け言語であり、変数の型が自動的に決定されます。
しかし、型変換が必要な場面があります。
そこで、この記事ではJavaScriptの型変換を初心者目線で詳しく徹底解説します。
●JavaScriptの型変換とは
型変換とは、あるデータ型から別のデータ型に変換することを指します。
JavaScriptでは、主に次のようなデータ型が存在します。
- 数値 (Number)
- 文字列 (String)
- 真偽値 (Boolean)
- オブジェクト (Object)
○型変換の基本
JavaScriptでは、型変換は自動的に行われることがありますが、明示的に型変換を行うこともできます。
●型変換の使い方
○サンプルコード1:数値と文字列の変換
JavaScriptで数値と文字列の型変換を行う方法を示します。
数値を文字列に変換するには、String()
関数を使用します。
また、文字列を数値に変換するには、Number()
関数を使用します。
let num = 42;
let str = String(num); // 数値を文字列に変換
console.log(typeof str); // "string"
let str2 = "123";
let num2 = Number(str2); // 文字列を数値に変換
console.log(typeof num2); // "number"
○サンプルコード2:真偽値の変換
真偽値への変換は、Boolean()
関数を使用します。
0や空文字列など、偽とみなされる値はfalse
に、それ以外の値はtrue
に変換されます。
let num = 42;
let bool = Boolean(num); // 数値を真偽値に変換
console.log(bool); // true
let str = "";
let bool2 = Boolean(str); // 空文字列を真偽値に変換
console.log(bool2); // false
○サンプルコード3:オブジェクトの変換
オブジェクトを他の型に変換する場合は、オブジェクトのメソッドを使って値を取得し、それを適切な型に変換します。
let obj = { x: 42, y: "hello" };
let num = Number(obj.x); // オブジェクトのプロパティを数値に変換
console.log(num); // 42
let str = String(obj.y); // オブジェクトのプロパティを文字列に変換
console.log(str); // "hello"
●型変換の応用例
ここでは、型変換を活用した応用例を紹介します。
○サンプルコード4:入力値チェック
ユーザーからの入力値が数値かどうかをチェックする例です。
let input = "42"; // ユーザーからの入力値を仮定
if (!isNaN(Number(input))) {
console.log("入力値は数値です。");
} else {
console.log("入力値は数値ではありません。");
}
○サンプルコード5:条件分岐の簡略化
型変換を利用して、条件分岐をシンプルにする例です。
let num = 42;
// 型変換を使用しない場合
if (num > 0) {
console.log("正の値です。");
} else {
console.log("正の値ではありません。");
}
// 型変換を使用する場合
console.log(Boolean(num > 0) ? "正の値です。" : "正の値ではありません。");
●注意点と対処法
○型変換の罠
型変換には、意図しない挙動が起こることがあります。
例えば、文字列と数値の加算時に、意図しない文字列の連結が発生することがあります。
let str = "5";
let num = 10;
console.log(str + num); // "510" と表示される
○対処法の例
意図しない型変換が起こらないように、明示的に型変換を行ってから計算を行います。
let str = "5";
let num = 10;
console.log(Number(str) + num); // 15 と表示される
●カスタマイズ方法
○サンプルコード6:独自の型変換関数
独自の型変換関数を作成して、特定の条件で変換を行う方法を示します。
// 文字列を数値に変換する独自の関数
function customNumber(str) {
if (str === "未入力") {
return 0;
}
return Number(str);
}
let input = "未入力";
console.log(customNumber(input)); // 0 と表示される
まとめ
JavaScriptで型変換を行う方法とその応用例、注意点と対処法、カスタマイズ方法を紹介しました。
型変換は便利な機能ですが、意図しない挙動が起こることがあるため、適切に使い分けることが重要です。