JavaScriptキャストの方法10選！初心者にもわかりやすい解説とサンプルコード

はじめに

この記事を読めば、JavaScriptのキャストを使いこなせるようになります。

JavaScriptキャスト（型変換）について初心者にもわかりやすく解説し、実用的なサンプルコードを10個紹介します。

キャストの使い方や注意点も徹底解説します。

JavaScriptのキャスト（型変換）とは、あるデータ型を別のデータ型に変換することです。

JavaScriptでは、自動的に型変換が行われる場合もありますが、プログラマが明示的に型変換を行うこともできます。

JavaScriptでは、主に下記の方法でキャストが行われます。

ここでは、実用的なサンプルコードを用いて、JavaScriptキャストの使い方を10個紹介します。

let num = 42;
let str = String(num);
console.log(typeof str); // "string"

このコードでは、数値の42を文字列にキャストしています。

let str = "42";
let num = Number(str);
console.log(typeof num); // "number"

このコードでは、文字列の”42″を数値にキャストしています。

let bool = true;
let str = String(bool);
console.log(typeof str); // "string"

このコードでは、論理値のtrueを文字列にキャストしています。

let str = "true";
let bool = Boolean(str);
console.log(typeof bool); // "boolean"

このコードでは、文字列の”true”を論理値にキャストしています。

let obj = { valueOf: () => 42 };
let num = Number(obj);
console.log(typeof num); // "number"

このコードでは、オブジェクトを数値にキャストしています。

let num = 42;
let obj = new Number(num);
console.log(typeof obj); // "object"

このコードでは、数値をオブジェクトにキャストしています。

let arr = [1, 2, 3];
let obj = Object(arr);
console.log(typeof obj); // "object"

このコードでは、配列をオブジェクトにキャストしています。

let obj = { 0: "a", 1: "b", 2: "c", length: 3 };
let arr = Array.from(obj);
console.log(Array.isArray(arr)); // true

このコードでは、オブジェクトを配列にキャストしています。

let date = new Date();
let str = date.toString();
console.log(typeof str); // "string"

このコードでは、日付オブジェクトを文字列にキャストしています。

let str = "2023-04-10";
let date = new Date(str);
console.log(typeof date); // "object"

このコードでは、文字列を日付オブジェクトにキャストしています。

JavaScriptのキャストにはいくつかの注意点があります。

数値や論理値から文字列へのキャストは比較的簡単ですが、逆に文字列から数値や論理値へのキャストには注意が必要です。
例えば、空文字列や非数値文字列を数値にキャストすると、NaN（非数値）になることがあります。
このような場合は、parseInt()やparseFloat()関数を使用して、適切に数値に変換してください。
オブジェクトからプリミティブ型へのキャストや、プリミティブ型からオブジェクトへのキャストは、適切なメソッドを使用しないと期待した結果が得られないことがあります。
例えば、オブジェクトを数値にキャストする際は、オブジェクトにvalueOf()メソッドが実装されていることを確認してください。