JavaScriptを一から理解する: 型変換について
はじめに
はじめまして、Doxperと申します。
今回はJavaScriptの型変換についてご紹介します。
初学者の方にとって少し分かりにくい概念かもしれませんが、私なりに分かりやすく説明するので一緒に学んでいきましょう！
この記事でできるようになること
- 型変換とはどういったものか理解することができる。
- JavaScriptでの型変換のルールについて学ぶことができる。
対象読者
- エンジニアを目指している同士
- JavaScriptの基礎を身につけたい方
- 過去にプログラミング学習に挫折した方
- プログラミング言語は他に触ったことがない方
JavaScript Type Conversions
型変換(キャスト)とは簡単に説明すると、あるデータ型を別のデータ型に変換することを指します。
JavaScriptにおける型変換は大きく分けて以下の二種類があります。
- 暗黙の型変換 -- 自動的な型変換
- 明示的な型変換 -- 手動での型変換
JavaScriptにはいくつかのデータ型が存在すると以前の記事で紹介しましたが、JavaScriptにおける型変換はString,number,booleanの３つのデータ型にのみ適応されます。
明示的な型変換
文字列変換
値を文字列に変換するには、String()またはtoString()メソッドを使用します。
実際にコードを見てみましょう。
//構文: String(文字列に変換する値)
//数値を文字列に変換
String(777); // => '777'
String(3.14); // => '3.14'
//ブール値を文字列に変換
String(true); // => 'true'
もちろん変数で使用することも可能です。
以下のコードは変数fooに数値を代入し、typeof演算子で型をチェックしています。
そしてString()を使い型変換を行い再代入した後、再度typeof演算子で型をチェックしています。
//変数fooに数値123を代入
let foo = 123;
console.log(typeof foo); // => number
//型変換を行い再代入
foo = String(foo);
console.log(typeof foo); // => string
同様の方法でtoString()を使うことができます。
let foo = 5;
foo.toString(); // => '5'
String() vs toString()
ここではString()とtoString()の違いについて少し説明します。
String()は文字列オブジェクトを生成するコンストラクタであり、toString()はオブジェクトを文字列表現に変換するといった違いがあります。
またtoString()は値が存在する必要がありますが、String()では、undefinedまたはnullの値に対して使用することができます。
コードを見てみましょう。
//以下は全て文字列に変換可能
String(true); // => 'true'
String(false); // => 'false'
String(null); // => 'null'
String(NaN); // => 'NaN'
String(undefined); // => 'undefined'
null,NaN,undefinedを値として渡すと、String()はエラーを出さずにそれらを文字列に変換しています。
toString()ではどうでしょうか？
コードを見てみましょう。
let foo = NaN;
foo.toString(); // => NaN
let bar = null;
bar.toString(); //TypeError: Cannot read properties of null (reading 'toString')
lat baz = undefined;
baz.toString(); //TypeError: Cannot read properties of undefined (reading 'toString')
nullやundefinedの値を渡そうとするとJavaScriptエンジンはTypeErrorを表示します。
数値変換
値を数値型へ変換するにはNumber()メソッドを使用します。
Number('1975'); // => 1975
文字列は数値へ変換されて引用符'',""は無くなります。
ブール値も数値へ変換できます。
Number(true); // => 1
Number(false); // => 0
またJavaScriptは'',nullは0を返します。
Number(null); // => 0
Number(''); // => 0
数値に変換できない値はNaNを返します。
Number('hello'); // => NaN
Number(null); // => NaN
Number(undefined); // => NaN
明示的に数値へ変更したい場合はparseInt(), parseFloat(), Math.floor()を使う方法もあります。
真偽値変換
他のデータ型を真偽値型に変換するには、Boolean()を使用することができます。
0, '', null, undefined,NaN はいずれもfalseになり、その他の値はtrueになります。
//いずれもfalse
Boolean(0); // => false
Boolean(''); // => false
Boolean(null); // => false
Boolean(undefined); // => false
Boolean(NaN); // => false
//いずれもtrue
Boolean(' '); // => true
Boolean(111); // => true
Boolean('foo'); // => true
暗黙の型変換
最後に暗黙の型変換についてご紹介します。
特定の状況において、JavaScriptはあるデータ型を自動的に別のデータ型に変換します。
文字列変換
最初のオペランドが文字列で、2番目のオペランドが非文字列の場合暗黙的に文字列に変換されます。
以下のコードでは+演算子を使用して二つのオペランドを結合しています。
let foo;
foo = '1' + 1;
console.log(foo); // => 11
foo = '1' + true;
console.log(foo); // => 1true
foo = '1' + undefined;
console.log(foo); // "1undefined"
foo = '1' + null;
console.log(foo); // "1null"
数値変換
算術演算子-,*,/,%などを使用した場合は暗黙的に数値型へ変換されます。
let num;
num = '4' - 1;
console.log(num); // => 3
num = 1 * '4';
console.log(num); // => 4
num = '1' + undefined;
console.log(foo); // "1undefined"
num = '1' + null;
console.log(num); // "1null"
おわりに
いかがでしたでしょうか？
今回はJavaScriptの型変換についてご紹介しました。
全てを一度に理解するのは難しいかもしれませんが、暗黙的な型変換などが原因で意図しない結果を招くため、しっかりと理解しておくことが大事だと記事を書いていて思いました。
また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。
それではまた次回の記事でお会いしましょう👋
参考文献
型変換
How To Convert Data Types in JavaScript | DigitalOcean
JavaScript Type Conversions (with Examples)
Type Conversion and Coercion. JavaScript Concepts Explained In-Depth | by Nitin Gutte | TheLeanProgrammer | Medium
Discussion