[JavaScript] 型変換(キャスト)の使い方

2023年5月2日2023年11月24日

キャストとは、プログラミングにおいて、あるデータ型を別のデータ型に変換することを言います。JavaScriptでは、以下のようなキャストがあります。

明示的なキャスト（explicit coercion）
暗黙的なキャスト（implicit coercion）

明示的なキャスト

明示的なキャストとは、明確にデータ型を変換することを言います。以下に、代表的な明示的なキャストの方法を紹介します。

String()関数

String()関数は、引数を文字列に変換します。例えば、以下のように使用します。

const num = 123;
const str = String(num);
console.log(str); // "123"

Boolean()関数

Boolean()関数は、引数を真偽値に変換します。例えば、以下のように使用します。

const num = 0;
const bool = Boolean(num);
console.log(bool); // false

Number()関数

Number()関数は、引数を数値に変換します。例えば、以下のように使用します。

const str = "123";
const num = Number(str);
console.log(num); // 123

parseInt()関数

parseInt()関数は、文字列を整数に変換します。例えば、以下のように使用します。

const str = "123";
const num = parseInt(str);
console.log(num); // 123

Number()関数とparseInt()関数の違い

上記でNumber()関数とparseInt()関数の基本を説明しましたが、使い方に違いがある部分がありますので、違いについて紹介します。

変換方法の違い

Number()関数は、引数を数値に変換します。引数が数値の場合はそのまま、文字列の場合は数値に変換します。

console.log(Number(100)); // 100
console.log(Number("100")); // 100

一方、parseInt()関数は、引数を整数に変換します。文字列を整数に変換する場合には、第二引数に基数（進数）を指定する必要があります。基数を指定しない場合には、10進数として解釈されます。

console.log(parseInt("100")); // 100
console.log(parseInt("100", 10)); // 100
console.log(parseInt("1010", 2)); // 10

NaNの扱い方の違い

Number()関数は、引数を数値に変換できない場合には、NaN（Not a Number）を返します。

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

一方、parseInt()関数は、引数の先頭が数字でない場合には、NaNを返します。

console.log(parseInt("hello")); // NaN

文字列の扱い方の違い

Number()関数は、文字列を数値に変換する際に、空文字列は0として扱います。

console.log(Number("")); // 0

一方、parseInt()関数は、空文字列を整数に変換できません。

console.log(parseInt("")); // NaN

オブジェクトの扱い方の違い

Number()関数は、オブジェクトを数値に変換する場合には、valueOf()メソッドを呼び出してから変換を行います。

const obj = { valueOf: () => 100 };
console.log(Number(obj)); // 100

一方、parseInt()関数は、オブジェクトを整数に変換することができません。

const obj = { valueOf: () => 100 };
console.log(parseInt(obj)); // NaN

Number()関数とparseInt()関数は、それぞれ異なる変換方法を持ちます。Number()関数は、引数を数値に変換するために使われ、parseInt()関数は、文字列を整数に変換するために使われます。また、引数が数値でない場合の扱い方や、空文字列や小数点以下の扱い方、オブジェクトの扱い方などにも違いがあります。正確な変換方法を選択するためには、それぞれの関数の違いを理解しておくことが重要です。

暗黙的なキャスト

暗黙的なキャストとは、演算子や関数の引数などの文脈によって、自動的にデータ型が変換されることを言います。以下に、代表的な暗黙的なキャストの例を紹介します。

文字列と数値の演算

JavaScriptでは、文字列と数値を足算すると、自動的に文字列が数値に変換されます。例えば、以下のように使用します。

const str = "1";
const num = 2;
const result = str + num;
console.log(result); // "12"

真偽値と数値の演算

JavaScriptでは、真偽値と数値を足算すると、自動的に真偽値が数値に変換されます。例えば、以下のように使用します。

const bool = true;
const num = 2;
const result = bool + num;
console.log(result); // 3

比較演算子

JavaScriptでは、異なるデータ型の値を比較する際に、暗黙的なキャストが行われます。例えば、以下のように使用します。

console.log(1 == "1"); // true
console.log(true == 1); // true
console.log(false == 0); // true

オブジェクトと文字列の演算

JavaScriptでは、オブジェクトと文字列を足算すると、オブジェクトが文字列に変換されます。例えば、以下のように使用します。

const obj = { name: "John", age: 30 };
const str = "My name is " + obj;
console.log(str); // "My name is [object Object]"

注意点

キャストには注意点があります。以下に、代表的な注意点を紹介します。

NaNの扱い

数値に変換できない文字列をNumber()関数で変換すると、NaNという特殊な値になります。NaNは、自分自身と一致しないため、注意が必要です。

const str = "hello";
const num = Number(str);
console.log(num); // NaN
console.log(num === NaN); // false
console.log(isNaN(num)); // true

0と空文字の扱い

JavaScriptでは、0と空文字は、それぞれfalseとして扱われます。そのため、真偽値に変換する場合には注意が必要です。

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

まとめ

JavaScriptにおけるキャストについて、明示的なキャストと暗黙的なキャストの例を紹介しました。JavaScriptにおいて、キャストは、ある型の値を別の型に変換することを指します。明示的なキャスト方法には、Number()、String()、Boolean()、parseInt()、parseFloat()などがあり、暗黙的なキャストは演算子や比較演算子を使用する際に発生します。適切なキャスト方法を選択することで、型の不一致によるエラーを回避できます。ただし、暗黙的なキャストは予期しない挙動を引き起こす可能性があるため、注意が必要です。JavaScriptを扱う上で、キャストの知識は非常に重要であるため、しっかりと理解しておくことが望まれます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！