6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年10月15日 JavaScript (JavaScript Primer) 明示的な型変換

明示的な型変換

falsyな値とは

JavaScriptでは、どの値がtrueでどの値がfalseになるかは、次のルールによって決まります。

  • falsyな値はfalseになる

  • falsyでない値はtrueになる

falsyな値とは次の7種類の値のことを言います。

  • false
  • undefined
  • null
  • 0
  • 0n
  • NaN
  • ""(空文字列)

falsyな値が本当にfalseになるかを、実際に検証しました。

// これらの値以外はtrueになります。
console.log(Boolean(false)) // => false
console.log(Boolean(undefined)) // => false
console.log(Boolean(null)) // => false
console.log(Boolean(0)) // => false
console.log(Boolean(0n)) // => false
console.log(Boolean(NaN)) // => false
console.log(Boolean("")) // => false

// 空白文字はfalsyな値ではないので、trueになる。
console.log(Boolean(" ")) // => true

Booleanコンストラクタ関数(任意の値 → 真偽値)

注意点

Booleanを使った型変換は、楽をするための型変換であり、正確に真偽値を得るための方法ではありません。 そのため、型変換をする前にまず別の方法で解決できないかを考えることも大切です。

Stringコンストラクタ関数(数値 → 文字列)

注意点

シンボルを文字列結合演算子(+)で文字列に変換できません。

Numberコンストラクタ関数(文字列 → 数値)

注意点

Numberコンストラクタ関数、Number.parseInt、Number.parseFloatは、 数字以外の文字列を渡すとNaN(Not a Number)を返します。

以下の例の場合、Number関数で数値に変換しようとしています。数値を文字列リテラルで囲ったものは数値へと変換できるので、数値と評価されるのですが、文字を文字列リテラルで囲った一般的な文字列は中身の部分が数値ではなく数値へと変換できないのでNaNと評価されてしまうのです。

// 数値はそのまま出力されます。
Number(1111); // => 1111

// 文字列リテラルで数字を囲っても数値として反映されます。
Number("1111"); // => 1111

数字以外の値はNaNとして出力されます。

// みかんという文字列は数字ではないため、数値へは変換できません。
Number("みかん"); // => NaN

// 未定義の値も、もちろんNaNになります。
Number(undefined); // => NaN

NaNとは

NaNはNot a Numberの略称であり、Number型の値です。

注意点

NaNしか持っていない特殊な性質として、自分自身と一致しないというものがあります。 この特徴を利用することで、ある値がNaNであるかを判定できます。

また、NaNは何と演算しても結果がNaNとなってしまうので、計算過程のどの値がNaNであるかを判別するのは困難です。

Number.isNaN() メソッド

引数がNaN かどうか評価します。
返り値は与えられた値が NaN であり、かつその型が Number である場合は true、それ以外の場合は false です。

空文字列かどうかを判定する

文字列が空文字かどうかを判定したい時、boolean関数を使ってfalsyな値を判定することで空文字かどうかを区別することが出来ます。しかし、falsyな値とは空文字以外にも0やundefindの時も含まれるので厳密にはboolean関数を使って完璧に空文字と判断することはできません。

// 空文字列かどうかを判定
function isEmptyString(str) {
    // `str`がfalsyな値なら、`isEmptyString`関数は`true`を返す
    // boolean関数で、'str'でfalsyな値(空文字、0、undefindの時)はfalseを返すようにする。
    return !Boolean(str);
}
// 空文字列列の場合は、trueを返す
console.log(isEmptyString("")); // => true
// falsyな値の場合は、trueを返す
console.log(isEmptyString(0)); // => true
// undefinedの場合は、trueを返す
console.log(isEmptyString()); // => true

しかし、以下のように記述することで完璧な空文字を判断することが出来ます。 空文字列とは「String型で文字長が0の値」であると定義できるので、isEmptyString関数を以下のように定義します。

// 空文字列かどうかを判定
function isEmptyString(str) {
    // String型でlengthが0の値の場合はtrueを返す
    return typeof str === "string" && str.length === 0;
}
console.log(isEmptyString("")); // => true
// falsyな値でも正しく判定できる
console.log(isEmptyString(0)); // => false
console.log(isEmptyString()); // => false

boolean関数では、厳密に真偽値を得るために有効な方法ではありません。そのため、そのことを理解して使う必要があります。また、今回のようにboolean関数を使わない別の方法を模索する必要があります。

まとめ

この章では暗黙的な型変換と明示的な型変換について学びました。

  • 暗黙的な型変換は意図しない結果となりやすいため避ける
  • 比較には等価演算子(==)ではなく、厳密等価演算子(===)を利用する
  • 演算子による暗黙的な型変換より、明示的な型変換をする関数を利用する
  • 真偽値を得るには、明示的な型変換以外の方法もある

参考

JavaScript Primer
Number.isNaN() メソッド