型変換 の

型変換について

JavaScriptでは、値はさまざまな型を持ちます。変数の型を変えるには、明示的な_型変換_を行います。それに加えてJavaScriptは、文脈がそれを必要とするとき、型強制（暗黙の型変換）も行います。

型変換

ほかの多くの言語にあるような、別の型へキャストする構文はJavaScriptにはありませんが、代わりにいくつかの組み込みのヘルパーを使えます。 とくに、グローバルオブジェクトのBoolean、Number、Stringは、関数として使うことで値をそれぞれの型に変換できます。

真偽値への変換（truthyな値とfalsyな値）

Boolean(value)を使うと、どんな値でも真偽値に変換できます。 これはどのように働くのでしょうか？

falseに変換される値の集合は決まっていて、そうした値を_falsy_な値と呼びます。 とくに、false、0、空文字列、null、undefined、NaNはfalsyです。 MDNの「Falsy」の記事に完全な一覧があります。

それ以外のすべての値に対して、Booleanはtrueを返します。 こうした値を_truthy_と呼びます。

Boolean(-1);
// => true

Boolean(0);
// => false

Boolean(' ');
// => true

Boolean('');
// => false

説明したルールにより、JavaScriptでは'0'、'false'、[]、{}がtruthyであることに注意してください。

数値への変換

Number(value)を使うと、値を数値に変換できます。 文字列の先頭と末尾の空白は無視され、空文字列は0に変換されます。 プリミティブでない値や、数値を表していない文字列を変換しようとしても、エラーは投げられません。 代わりに、結果はNaN（非数）になります。

Number('  -12.34  ');
// => -12.34

Number('1,2');
// => NaN

Number('1 2');
// => NaN

Number('');
// => 0

Number('10e3');
// => 10000

Number({ key: '123' });
// => NaN

以下は、ほかのプリミティブ値に対してNumberが返す値です。

Number(true);
// => 1

Number(false);
// => 0

Number(null);
// => 0

Number(undefined);
// => NaN

最後の例とは対照的に、引数なしで呼び出したNumber()は0を返すと定義されていることに注意してください。

JavaScriptにはparseIntとparseFloatという関数もあります。 これらは、どの文字列を数値に変換できるかについて、より緩いルールを適用します。 そのため、予期しない結果を避けるには、変換関数としてNumberを使うのがおすすめです。

parseInt('123a45');
// => 123

Number('123a45');
// => NaN

文字列への変換

String(value)を使うと、値を文字列に変換できます。 プリミティブ値については、結果は予想どおりになります。

String(12.34);
// => '12.34'

String(false);
// => 'false'

String(null);
// => 'null'

String(undefined);
// => 'undefined'

配列の場合、String関数は各要素に文字列変換を適用し、その結果をカンマで連結します。 joinメソッドを自分で使って、区切り文字をカスタマイズすることもできます。 ただし、これらの場合、nullとundefinedは空文字列に変換されます。

String([42, null, true, 'abc']);
// => '42,,true,abc'

オブジェクトの場合、デフォルトではStringは役に立たないテキストを返します。

String({ key: 'value' });
// => '[object Object]'

toStringメソッドを用意するなどして、変換の挙動をカスタマイズできます。 javascript.infoの「オブジェクトからプリミティブへの変換」のセクションで詳しく説明されています。

オブジェクトや配列をよりよい文字列として表現するもう一つの一般的な方法は、JSONエンコードを使うことです。 JSON.stringifyで文字列に変換し、JSON.parseでオブジェクトや配列に戻せます。

const obj = {
  name: 'Gilda Guerra',
  address: {
    city: 'Goiânia',
  },
};

JSON.stringify(obj);
// => '{"name":"Gilda Guerra","address":{"city":"Goiânia"}}'

型強制

特定の文脈では、JavaScriptはある文を評価する前に、値を自動的に別のデータ型へ変換します。 この暗黙の変換を_型強制_と呼びます。

真偽値の文脈

値が真偽値の文脈で使われると、JavaScriptはBoolean関数と同じルールを適用して、その値を暗黙的に変換します。

• if文の条件が真偽値でない場合、条件が満たされているかどうかを判定するために型強制が適用されます。 三項演算子?の第1オペランドも同様です。

  const num = 0;
  if (num) {
    // this block is NOT executed because 0 is falsy
  }
  
  const name = 'Jin';
  name ? 'name was provided' : 'no name provided';
  // => 'name was provided'
  

• NOT演算子!のオペランドも、NOT演算が適用される前に真偽値へ変換されます。

  const name = '';
  !name;
  // => true
  

  この挙動の結果として、!!valueはBoolean(value)と同じ効果を持ちます。 とはいえ、読みやすさのためにBooleanを使いましょう。

• JavaScriptは、論理AND演算子（&&）と論理OR演算子（||）のオペランドにも型強制を適用します。 ただし、式の結果は必ずしも真偽値にならないことに注意してください。 元のオペランドの一方を返します（MDNの論理演算子を参照）。

  null || 'hello';
  // => 'hello'
  

文字列の文脈

プリミティブ値に対して加算演算子+を使い、一方のオペランドが文字列である場合、もう一方も文字列に変換されます。 変換のロジックはString関数を使ったときと同じです。 その後、2つの文字列が連結されます。

let name;
'hello ' + name;
// => 'hello undefined'

テンプレート文字列に埋め込まれた文字列以外の値にも、同じ暗黙の変換が起こります。

const degrees = 23;
`It is ${degrees} °C`;
// => 'Is is 23 °C.';

数値の文脈

多くの演算子は、上で説明したNumber関数のロジックに従って、（必要なら）オペランドを数値に変換します。

• 算術演算子：+（文字列が関与しない場合）、-、*、/、%、**
• 単項プラス演算子と単項マイナス演算子：+、-
• 関係演算子（文字列以外のオペランドの場合）：>、>=、<、<=
• ビット演算子：|、&、^、~

それぞれの演算子の詳細は、MDNの演算子一覧を参照してください。

オペランドが文字列になる可能性がある場合は、ミスを避けるために、常にNumber関数で明示的に変換するのが最善です。

'1' + '2';
// => '12'
// addition operator in string context as explained above

Number('1') + Number('2');
// => 3

文字列を数値に変換するために単項プラス演算子が使われているのを見かけることがあります。 これは、明示的なNumberの呼び出しよりもずっと読みにくいため、おすすめしません。

const value = '42';
+value;
// => 42

Number(value);
// => 42

緩い等価演算子・不等価演算子==/!=を使うときも、しばしば数値への暗黙の変換が伴います。 ただし、これらの演算子の正確なロジックはかなり複雑です（MDNの緩い等価性を参照）。 結果は予測しにくく、ときに予想外のものになります。 こうした暗黙の変換を避けるには、代わりに厳密等価演算子・厳密不等価演算子===/!==を使いましょう。