JavaScript/JavaScriptの型変換

概要

JavaScriptでは、値が異なる型に変換されることがあります。この変換は以下の2種類に分類されます。

• 暗黙的型変換: JavaScriptエンジンが自動的に型を変換する。
• 明示的型変換: 開発者が意図的に型を変換する。

型変換の挙動を理解することで、予期しない動作を防ぐことができます。

暗黙的型変換

暗黙的型変換は、演算子や比較によって自動的に型が変換されることを指します。

文字列への変換

非文字列型の値が文字列と結合される場合、暗黙的に文字列に変換されます。

console.log("Hello" + 42); // "Hello42"
console.log("Value: " + true); // "Value: true"

数値への変換

数値型が必要な場合、暗黙的に値が数値に変換されます。

console.log("5" - 3); // 2
console.log("10" * "2"); // 20
console.log(true + 1); // 2

ブーリアンへの変換

条件式では、値が暗黙的にブーリアン型に変換されます。以下の値はfalsyと評価され、それ以外はtruthyと評価されます。

• false
• 0
• ""（空文字列）
• null
• undefined
• NaN

if ("") {
  console.log("This won't run.");
} else {
  console.log("Falsy value.");
}
// "Falsy value."

オブジェクトへの変換

プリミティブ値が必要な場合に、オブジェクトが自動的にプリミティブ値に変換されます。

console.log([1, 2] + [3, 4]); // "1,23,4"（文字列結合）

明示的型変換

明示的型変換は、開発者が明示的に関数や演算子を使用して型を変換することを指します。

数値への変換

以下の方法で値を数値に変換できます。

• Number()関数
• 単項+演算子

console.log(Number("42")); // 42
console.log(+"3.14"); // 3.14

文字列への変換

以下の方法で値を文字列に変換できます。

• String()関数
• toString()メソッド
• テンプレートリテラル

console.log(String(42)); // "42"
console.log((42).toString()); // "42"
console.log(`${42}`); // "42"

ブーリアンへの変換

以下の方法で値をブーリアンに変換できます。

• Boolean()関数

console.log(Boolean(0)); // false
console.log(Boolean("text")); // true

配列・オブジェクトのプリミティブ値への変換

配列やオブジェクトをプリミティブ値に変換する場合、内部でtoString()またはvalueOf()メソッドが呼び出されます。

console.log([1, 2].toString()); // "1,2"
console.log({ key: "value" }.toString()); // "[object Object]"

特殊ケース

以下のような特殊な型変換が発生することがあります。

nullとundefined

nullとundefinedは、他の型に変換されるときに注意が必要です。

console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

NaN

数値への変換に失敗した場合、NaN（Not-a-Number）が返されます。

console.log(Number("abc")); // NaN

比較演算子

==は型変換を伴う比較を行い、===は型変換を伴わず厳密に比較します。

console.log(42 == "42"); // true
console.log(42 === "42"); // false

型変換のまとめ

• 暗黙的型変換は便利な反面、予期しない結果を招く可能性があるため注意が必要です。
• 明示的型変換を使用して、コードの意図を明確にするとよいでしょう。

参考

• JavaScriptの型と値
• JavaScriptの演算子