多くの場合、演算子と関数は自動的に値を正しい型に変換します。それを “型変換” と呼びます。

たとえば、 alert は表示するために、自動的にある値を文字列へ変換します。数学的な処理は値を数値に変換します。

また、物事を正しくするために、ある値を明示的に変換する必要がある場合もあります。

まだオブジェクトについては話していません

このチャプターでは、まだ オブジェクト は説明しません。ここでは最初にプリミティブを学びます。その後、オブジェクトについて学んだ後、チャプター オブジェクトからプリミティブへの変換 で、どのようにオブジェクト変換が動作するのかを見ていきます。

文字列変換

文字列変換は、文字列形式の値が必要なときに発生します。

たとえば、alert(value) は値を表示するためにそれを行います。

また、そのために、String(value) 関数を使うこともできます:

let value = true;
alert(typeof value); // boolean

value = String(value); // 今、値は文字列の "true"
alert(typeof value); // string

文字列変換はほとんどが明白です。false"false" に、 null"null" になります。

数値変換

数値変換は数学的関数や表現の中で自動的に起こります。

たとえば、非数値に除算 / が適用された場合:

alert( "6" / "2" ); // 3, 文字列は数値に変換されます

また、明示的に value を変換するために Number(value) を使うことができます。

let str = "123";
alert(typeof str); // string

let num = Number(str); // 数値の 123 になります

alert(typeof num); // number

テキストフォームのような文字列ベースのソースから値を読むが、数値が入力されることを想定するときには通常明示的な変換が必要になります。

文字列が有効な数値でない場合、このような変換の結果は NaN です。たとえば:

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN, 変換失敗

数値変換ルール:

変換後…
undefined NaN
null 0
true と false 1 and 0
string 最初と最後のスペースは取り除かれます。そして、残った文字列が空の場合は結果は 0 になります。そうでなければ、文字列から “読んだ” 数値です。 エラーでは NaN が与えられます。

例:

alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN ("z" の読み込みでエラー)
alert( Number(true) );        // 1
alert( Number(false) );       // 0

nullundefined はここでは異なる振る舞いをすることに留意してください。: undefinedNaN になる一方、null は 0 になります。

'+'は文字列を連結します

ほぼすべての算術演算は値を数値に変換します。 注目すべき例外は加算 + です。もしも加算された値の1つが文字列である場合、他の値は文字列に変換されます。

そして、それらを連結(結合)します。:

alert( 1 + '2' ); // '12' (右側が文字列)
alert( '1' + 2 ); // '12' (左側が文字列)

引数の1つが文字列の場合にのみ起こります。それ以外では値は数値に変換されます。

Boolean変換

真偽値(Boolean)変換はシンプルです。

論理演算(後ほど条件テストや他の種類を見ます)で起こりますが、Boolean(value) を呼ぶことで手動で実行することもできます。

変換ルール:

  • 0, 空文字, null, undefinedNaN のように直感的に “空” の値は false になります。
  • 他の値は true になります。

例:

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
注意してください: ゼロの文字列 "0"true です

幾つかの言語(すなわち PHP)は ”0”false として扱います。しかし、JavaScriptでは、非空文字は常に true です。

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // スペースもまた true です (任意の非空文字は true)

サマリ

3つの最も広く使われている型変換があります: 文字列変換, 数値変換, 真偽値変換です。

文字列変換 – 何かを出力するときに起こり、String(value) で行うことができます。文字列への変換は、通常はプリミティブな値にとって明白です。

数値変換 – 算術演算で起こり、Number(value) で実行できます。

変換は次のルールに従います:

変換後…
undefined NaN
null 0
true と false 1 and 0
string 最初と最後のスペースは取り除かれます。そして、残った文字列が空の場合は結果は 0 になります。そうでなければ、文字列から “読んだ” 数値です。 エラーでは NaN が与えられます。

真偽値変換 – 論理演算で発生するか、Boolean(value) で実行できます。

次のルールに従います:

変換後…
0, null, undefined, NaN, "" false
それ以外の値 true

ルールのほとんどは理解し覚えるのが簡単です。通常間違える注目すべき例外は:

  • undefined は文字列としては NaN です, 0 ではりません。
  • "0"" " のようなスペースだけの文字列は真偽値としては true です。

オブジェクトについてはここでは説明しませんが、JavaScriptについての基本的なことを学んだら、オブジェクトに専念する オブジェクトからプリミティブへの変換 の章の後半に戻ります。

タスク

重要性: 5

これらの式の結果はどうなるでしょうか?

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
7 / 0
"  -9\n" + 5
"  -9\n" - 5
null + 1
undefined + 1

よく考え、書き溜めてから答えと比較してみてください。

"" + 1 + 0 = "10" // (1)
"" - 1 + 0 = -1 // (2)
true + false = 1
6 / "3" = 2
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
7 / 0 = Infinity
" -9\n" + 5 = " -9\n5"
" -9\n" - 5 = -14
null + 1 = 1 // (3)
undefined + 1 = NaN // (4)
  1. 文字列 "" + 1 の加算は 1 を文字列に変換します: "" + 1 = "1", そして "1" + 0 でも同じルールが適用されます。
  2. 減算 "-" は(ほとんどの算術演算子のように)数値のみで動作し、空文字列 ""0 に変換します。
  3. null は数値変換後は 0 になります。
  4. undefined は数値変換後は NaN になります。
チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。