【JavaScript】プリミティブなデータの型変換【ルール】

プリミティブなデータの型変換に関するルールが知りたい。

JavaScriptにおいて、データの型変換は暗黙的に行われることもあります。

JavaScriptの細かい挙動を理解するためには、データの型変換のルールを知っておく必要があります。

この記事では、「プリミティブ型のデータ」の型変換に絞って解説します。

という方はまず、下記の記事をお読み下さい。知っている方も再確認するといいのかなと、思います。

JavaScriptでは暗黙的にデータの型変換が行われている。

実は、JavaScriptでは暗黙的にデータの型変換が行われています。

その例を挙げると、

let result = "東京" + 2022;

console.log( result ); // 東京2022
console.log( typeof result ); // "string"

これは「文字列の連結」が行われる前に、「 2022 」という数値がstring型に変換されています。

なので、JavaScriptを上手く使いこなすには、型変換のルールを知っておく必要があります。

よく使われる３つの型変換とは？

まず、JavaScriptでよく行われるプリミティブなデータに対する型変換を3つ紹介します。

• 文字列変換
• 数値変換
• 真偽値変換

他のデータ型からstring型への型変換は「文字列変換」と呼ばれます。

それと同じように、他のデータ型からnumber型への型変換を「数値変換」、他のデータ型からboolean型への型変換を「真偽値変換」と呼びます。

「どのデータ型からどのデータ型への変換なのか？」でルールが変わる

ここでもう一つ重要なのが、「どのデータ型から変換するのか？」ということです。

それを踏まえて、解説していきます。

プリミティブなデータの中で、symbol型は最後にまとめて書く。

この記事はプリミティブなデータの型変換のルールをまとめていますが、最後にまとめて「symbol型の型変換のルール」に関して書きます。「その方が伝わりやすいのかな」、と判断したためです。

では、代表的な３つの型変換に関するルールについて、詳しく書いていきます。

文字列変換

下記のデータ型のデータは、どのように文字列変換するか、そのルールを書いていきます。

文字列変換は、基本的に「そのまま」、です。

• number
• bigint
• boolean
• null
• undefined

number型からstring型へ

let result = 4 + "2";

console.log( result ); // "42"

number型が、「文字列の連結」により、そのまま文字列型へ型変換されています。

bigint型からstring型へ

let result = 159802485810841085n;

console.log( result + "ああああ" ); // "159802485810841085ああああ"
console.log( typeof result ); // "bigint"
console.log( typeof ( result + "ああ" ) ); // "string"

bigint型のデータも「文字列の連結」によって、ほぼそのまま文字列型へと変換されています。

boolean型からstring型へ

let result = true;

console.log( result + "ああ" ); // "trueああ"
console.log( typeof ( result + "ああ" ) ); // "string"

boolean型のデータも「文字列の連結」によって、そのまま文字列型へと変換されます。

null型からstring型へ

let result = null;

console.log( result + "ああ" ); // "nullああ"
console.log( typeof ( result + "ああ" ) ); // "string"

null型のデータも「文字列の連結」によって、そのまま文字列型へと変換されます。

undefined型からstring型へ

let result = undefined;

console.log( result + "ああ" ); // "undefinedああ"
console.log( typeof ( result + "ああ" ) ); // "string"

undefined型のデータも「文字列の連結」によって、そのまま文字列型へと変換されます。

明示的にstring型へ型変換する方法

let stri = String( 23 );

console.log( typeof stri ); // "string"

このように、「String()」を使うことで、明示的にstring型へと型変換が可能です！

数値変換

JavaScriptで数値変換は、算術演算子が数学的に使われた時に、自動的に行われます。

では、下記のデータ型のデータは、どのように「数値変換」するのか、そのルールを書いていきます。

• string
• bigint
• boolean
• null
• undefined

string型からnumber型へ

let num = "7" - "3";

console.log( num ); // 4
console.log( typeof num ); // number

この様に、数字のような文字列型のデータは、算術演算子によって、自動的にnumber型へと変換されます。

let num = "7" - "3y";

console.log( num ); // NaN
console.log( typeof num ); // number

数字じゃない文字列が入ってしまっている文字列型のデータは、この様に、number型へと型変換が行われる際に「 NaN 」という特殊なnumber型のデータになります。

「not a number」の略です。

let num = "7" - "";

console.log( num ); // 7
console.log( typeof num ); // number

からの文字列はnumber型へ型変換が行われる際に「0」へと変換されます。

bigint型からnumber型へ

let num = 1595n - 5; // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions at ～

console.log( num ); 
console.log( typeof num ); 

「Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions at ～」

bigint型は算術演算で使用する場合、bigint型のデータとしか算術演算ができません。

片方がnumber型でもう片方がbigint型の計算は、そのままではできないので、どちらかを明示的に型変換する必要があります。

let num = Number( 1595n )  - 5;

console.log( num ); // 1590
console.log( typeof num ); // number

このように、Number型へそろえることで、算術演算が行えます。

※number型で正確に扱える「整数」の範囲を超えている、bigint型のデータをnumber型へ型変換すると、精度が落ちてしまうことがあるので、注意が必要です。

※number型は絶対値の大きさが「2の53乗-1」までの「整数」しか、正確に扱えません。

boolean型からnumber型へ

boolean型のデータは、下記の様にnumber型へと型変換されます。

• true　→　1
• false　→　0

let num =  true * 3;

console.log( num ); // 3
console.log( typeof num ); // number

このように、「true」が「1」に型変換していることが分かります。

null型からnumber型へ

nullは数値変換すると、「0」となります。

let num =  null * 3;

console.log( num ); // 0
console.log( typeof num ); // number

このように、nullが0へと数値変換されているのが分かります。

undefined型からnumber型へ

undefinedは数値変換すると、「NaN」となります。

let num =  undefined * 3;

console.log( num ); // NaN
console.log( typeof num ); // number

このように、undefinedがNaNに数値変換されていることが分かります。

真偽値変換

JavaScriptの真偽値変換は、if文の条件式や、論理演算の際に、自動的に行われます。

真偽値変換のルールは下記の通りです。

「0」「空文字列」「null」「undefined」「NaN 」は「false」となる。

他の値は「true」となる。

以上です。シンプルですね。

明示的にboolean型へと真偽値変換する方法

let boo = Boolean( 2025 );

console.log( typeof boo ); // "boolean"

このように、「Boolean()」を使うことで、明示的に真偽値変換が可能です。

symbol型の型変換

symbol型のデータは少し特殊なものなので、別にまとめておきました。

symbol型からstring型への型変換

symbol型は自動的にstring型への型変換はされません。

暗黙的な型変換を行うタイミングでエラーになってしまいます。

let stri = Symbol("id") + "go"; // Cannot convert a Symbol value to a string at ～

「Cannot convert a Symbol value to a string at ～」

このようにすると、上のようなエラーが、でてしまいます。

let stri = String( Symbol("id") );

console.log( stri ); // "Symbol(id)"
console.log( typeof stri ); // "string"

このように「String()」を使うことで、明示的な型変換は可能です。

symbol型からnumber型への型変換

number型への型変換はエラーになってしまいます。

symbol型からboolean型への型変換

symbol型のデータは、暗黙的にboolean型への型変換が可能です。

その際は、必ず「true」になります。

let boo = Boolean( Symbol() );

console.log( boo ); // "true"
console.log( typeof boo ); // "boolean"

このような明示的な型変換もできます。

その際も「true」です。

オブジェクト型のデータの型変換は別記事で

この記事では、プリミティブなデータに絞って型変換のルールを解説しました。

オブジェクトは、プリミティブとは違った仕組みで変換が行われるので、敢えて別の記事に分けて解説しますね。

まとめ

JavaScriptでは、暗黙的にデータの型変換が行われている。

そして、JavaScriptでは、下記の３つの型変換がよく使われる。

• 文字列変換
• 数値変換
• 真偽値変換

プリミティブなそれぞれのデータの型変換のルールは下記の通り。

明示的な型変換には「String()」が使える。

明示的な型変換には「Number()」が使える。

この記事の内容は以上です！

最後まで読んでくれてありがとうございました！

僕自身も日々、技術力の向上に努めていますので、皆さんも一緒に楽しくプログラミングの勉強を頑張りましょう！

ではまた。