📘

[JavaScript] Boolean型について

2022/10/04に公開約7,500字

boolean型への変換

Boolean関数で文字列型からboolean型へ変換

const bool1 = Boolean('true');
const bool2 = Boolean('false');
const bool3 = Boolean('');
const bool4 = Boolean(' ');
const bool5 = Boolean('0');
const bool6 = Boolean('1');
const bool7 = Boolean('A');

実行結果

Boolean("true") = true
Boolean("false") = true
Boolean("") = false
Boolean(" ") = true
Boolean("0") = true
Boolean("1") = true
Boolean("A") = true

parse関数を自作する方法

文字列が”true”の際にbooleanのtrue、文字列がそれ以外の場合はbooleanのfalseに変換するparse関数は、以下のように書ける。

function parseStrToBoolean(str) {
  // 文字列を判定
  return str == 'true' ? true : false;
}
const str1 = 'true';
const str2 = 'false';
console.log('bool str1 = ' + parseStrToBoolean(str1));
console.log('bool str2 = ' + parseStrToBoolean(str2));

実行結果

bool str1 = true
bool str2 = false

数値からboolean型への変換

JavaScriptの数値型をboolean型へBoolean関数で変換する。
1、-1、0などの基本的な数値は、0以外はtrueに変換され、0の場合はfalseに変換される。
また、Number.NaNなどの数値リテラルは、NaN以外はtrueに変換され、NaNの場合は0に変換される。

const bool10 = Boolean(1);
const bool11 = Boolean(-1);
const bool12 = Boolean(0);
const bool13 = Boolean(Number.NaN);
const bool14 = Boolean(Number.POSITIVE_INFINITY);
const bool15 = Boolean(Number.MAX_VALUE);

実行結果

Boolean(1) = true
Boolean(-1) = true
Boolean(0) = false
Boolean(Number.NaN) = false
Boolean(Number.POSITIVE_INFINITY) = true
Boolean(Number.MAX_VALUE) = true

オブジェクトからboolean型への変換

基本的にオブジェクト型をBoolean関数で変換すると、bool値はすべてtrueになる。

const bool20 = Boolean({ array: 'abc' });
const bool21 = Boolean(new Object(1));
const bool22 = Boolean(new Object(null));
const bool23 = Boolean(new String('abc'));
const bool24 = Boolean(new String(''));
const bool25 = Boolean(new String(null));
const bool26 = Boolean(new Number(100));
const bool27 = Boolean(new Number(-1));
const bool28 = Boolean(new Number(0));
const bool29 = Boolean(new Number(Number.NaN));
const bool30 = Boolean(new Boolean(true));
const bool31 = Boolean(new Boolean(false));

実行結果

Boolean({ array: "abc" }) = true
Boolean(new Object(1)) = true
Boolean(new Object(null)) = true
Boolean(new String("abc")) = true
Boolean(new String("")) = true
Boolean(new String(null)) = true
Boolean(new Number(100)) = true
Boolean(new Number(-1)) = true
Boolean(new Number(0)) = true
Boolean(new Number(Number.NaN)) = true
Boolean(new Boolean(true)) = true
Boolean(new Boolean(false)) = true

new Boolean(false) と指定しても、trueに変換されている。

booleanと各種型の比較・型判定

booleanのif判定

if (true) {
  console.log('1st if( true ) is true.');
} else {
  console.log('1st if( true ) is false.');
}

if (false) {
  console.log('2nd if( false ) is true.');
} else {
  console.log('2nd if( false ) is false.');
}

実行結果

1st if( true ) is true.
2nd if( false ) is false.

if文のカッコ「()」内がtrueの場合はtrueと判定され、falseの場合はfalseと判定されている。

boolean変数の反転

今度はboolean型の変数を使ってif文で判定する。
また、今回は否定論理演算子「!」を使い、bool値を反転させている。
「!!」とすると、bool値の反転の反転を行うことになる。

const boolvalue = true;

if (boolvalue) {
  console.log('1st if( boolvalue ) is true.');
} else {
  console.log('1st if( boolvaluye ) is false.');
}

if (!boolvalue) {
  console.log('2nd if( ! boolvalue ) is true.');
} else {
  console.log('2nd if( ! boolvalue ) is false.');
}

if (boolvalue) {
  console.log('3rd if( !! boolvalue ) is true.');
} else {
  console.log('3rd if( !! boolvalue ) is false.');
}

実行結果

1st if( boolvalue ) is true.
2nd if( ! boolvalue ) is false.
3rd if( !! boolvalue ) is true.

最初に変数boolvalueにtrueを代入している。
最初のif文ではtrueと判定されている。
次のif文ではboolvalueに否定演算子「!」を使用したので、falseと判定されている。
最後のif文ではboolvalueに否定演算子を2回「!!」使用したので、true -> false -> true となり、trueと判定されている。

真偽値判定・比較・反転

boolean型と文字列を比較したときに、その真偽値がどのように判定されるか。
boolean型のコンストラクタとは違い、falseとなるのは空文字""以外に"0"がある。
また、trueとなるのは、"1"のみ。

// 真偽値判定・比較・反転
console.log('"true" == true = ' + ('true' == true));
console.log('"false" == false = ' + ('false' == false));
console.log('"" == true = ' + ('' == true));
console.log('"" == false = ' + ('' == false));
console.log('"0" == true = ' + ('0' == true));
console.log('"0" == false = ' + ('0' == false));
console.log('"1" == true = ' + ('1' == true));
console.log('"1" == false = ' + ('1' == false));
console.log('"A" == true = ' + ('A' == true));
console.log('"A" == false = ' + ('A' == false));

実行結果

"true" == true = false
"false" == false = false
"" == true = false
"" == false = true
"0" == true = false
"0" == false = true
"1" == true = true
"1" == false = false
"A" == true = false
"A" == false = false

次に、文字列を否定演算子 ! で反転させてみる。
反転結果がtrue(反転元はfalse)となるのは、空文字""のみ。
他は反転結果がすべてfalse(反転元はtrue)となっている。
反転演算子はBoolean型のコンストラクタと対応が取れている。

// 反転
console.log('! "true" = ' + !'true');
console.log('! "false" = ' + !'false');
console.log('! "" = ' + !'');
console.log('! "0" = ' + !'0');
console.log('! "1" = ' + !'1');
console.log('! "A" = ' + !'A');

実行結果

! "true" = false
! "false" = false
! "" = true
! "0" = false
! "1" = false
! "A" = false

その他の真偽値判定・比較・反転

文字列型に続いて、整数や小数、nullやundefinedの真偽値を比較して判定してみる。
実行結果を見ると、1と1.0はtrue、0と0.0はfalseと判定されている。
nullとundefinedの2つはtrueでもfalseでもない値と判定されている。

// その他の真偽値判定・比較・反転
console.log('1 == true = ' + (1 == true));
console.log('1 == false = ' + (1 == false));
console.log('0 == true = ' + (0 == true));
console.log('0 == false = ' + (0 == false));
console.log('1.0 == true = ' + (1.0 == true));
console.log('1.0 == false = ' + (1.0 == false));
console.log('0.0 == true = ' + (0.0 == true));
console.log('0.0 == false = ' + (0.0 == false));
console.log('null == true = ' + (null == true));
console.log('null == false = ' + (null == false));
console.log('undefined == true = ' + (undefined == true));
console.log('undefined == false = ' + (undefined == false));

実行結果

1 == true = true
1 == false = false
0 == true = false
0 == false = true
1.0 == true = true
1.0 == false = false
0.0 == true = false
0.0 == false = true
null == true = false
null == false = false
undefined == true = false
undefined == false = false

整数や小数、nullやundefinedの否定演算子 ! を使って反転してみる。
実行結果を見ると、1と1.0はfalseに反転(反転元はtrue)、0と0.0はtrueに反転(反転元はfalse)されている。
nullとundefinedも反転すると実行結果がtrueとなる。
そのため、!!null、!!undefinedとすれば両者ともfalseとなる。

//反転
console.log('! 1 = ' + !1);
console.log('! 0 = ' + !0);
console.log('! 1.0 = ' + !1.0);
console.log('! 0.0 = ' + !0.0);
console.log('! null = ' + !null);
console.log('! undefined = ' + !undefined);

実行結果

! 1 = false
! 0 = true
! 1.0 = false
! 0.0 = true
! null = true
! undefined = true

Boolean型の型の判定(typeof)

最後にtypeof演算子を使って、Boolean型やtrueやfalseを型判定してみる。
実行結果を見てると、trueやfalseはもちろんのこと、コンストラクタに文字列や数値、nullを指定したBooolean型も、「boolean」と判定されていることがわかる。

// Boolean型の型の判定
console.log('typeof(true) = ' + typeof true);
console.log('typeof(false) = ' + typeof false);
console.log('typeof(Boolean("true") = ' + typeof Boolean('true'));
console.log('typeof(Boolean("false") = ' + typeof Boolean('false'));
console.log('typeof(Boolean("") = ' + typeof Boolean(''));
console.log('typeof(Boolean(" ") = ' + typeof Boolean(' '));
console.log('typeof(Boolean(1)) = ' + typeof Boolean(1));
console.log('typeof(Boolean(0)) = ' + typeof Boolean(0));
console.log('typeof(Boolean(null)) = ' + typeof Boolean(null));

実行結果

typeof(true) = boolean
typeof(false) = boolean
typeof(Boolean("true") = boolean
typeof(Boolean("false") = boolean
typeof(Boolean("") = boolean
typeof(Boolean(" ") = boolean
typeof(Boolean(1)) = boolean
typeof(Boolean(0)) = boolean
typeof(Boolean(null)) = boolean

参考サイト

https://www.sejuku.net/blog/23300

Discussion

ログインするとコメントできます