こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。
今日は、JavaScriptのboolean型への変換、if判定、真偽値判定、反転などについて解説します。
この記事では、
・文字列型からboolean型への変換
・数値からboolean型への変換
・オブジェクトからboolean型への変換
という基本的な内容から、
・booleanのif判定
・boolean変数の反転
・真偽値判定・比較・反転
・Boolean型の型の判定
などの応用的な使い方に関しても学習していきます。
このページで、boolean型をよく把握して自分のスキルとしていきましょう！
boolean型への変換
Boolean関数で文字列型からboolean型へ変換
JavaScriptの文字列をboolean型へBoolean関数で変換してみます。
ただし、注意が必要なのですが、Boolean関数は、"true"をtrue、"false"をfalseには変換しません。
文字列が空文字""の時のみfalseに変換され、他の文字列は全てtrueに変換されます。
window.onload = function () {
var bool1 = Boolean("true");
var bool2 = Boolean("false");
var bool3 = Boolean("");
var bool4 = Boolean(" ");
var bool5 = Boolean("0");
var bool6 = Boolean("1");
var bool7 = Boolean("A");
console.log('Boolean("true")=' + bool1);
console.log('Boolean("false")=' + bool2);
console.log('Boolean("")=' + bool3);
console.log('Boolean(" ")=' + bool4);
console.log('Boolean("0")=' + bool5);
console.log('Boolean("1")=' + bool6);
console.log('Boolean("A")=' + bool7);
}
実行結果：
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関数は、以下のように書けます。
window.onload = function () {
function parseStrToBoolean(str) {
// 文字列を判定
return (str == 'true') ? true : false;
}
var str1 = "true";
var 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に変換されます。
window.onload = function () {
var bool10 = Boolean(1);
var bool11 = Boolean(-1);
var bool12 = Boolean(0);
var bool13 = Boolean(Number.NaN);
var bool14 = Boolean(Number.POSITIVE_INFINITY);
var 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
基本的に「値がない」ことを示す0とNaNの場合はfalseに変換されると覚えておいてください。
オブジェクトからboolean型への変換
JavaScriptのオブジェクト型をboolean型へBoolean関数で変換してみます。
基本的にオブジェクト型をBoolean関数で変換すると、bool値はすべてtrueになります。
window.onload = function () {
var bool20 = Boolean({ array: "abc" });
var bool21 = Boolean(new Object(1));
var bool22 = Boolean(new Object(null));
var bool23 = Boolean(new String("abc"));
var bool24 = Boolean(new String(""));
var bool25 = Boolean(new String(null));
var bool26 = Boolean(new Number(100));
var bool27 = Boolean(new Number(-1));
var bool28 = Boolean(new Number(0));
var bool29 = Boolean(new Number(Number.NaN));
var bool30 = Boolean(new Boolean(true));
var 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判定
booleanを使ってif文で分岐させ、処理を切り分ける基本の使い方は以下の通りです。
次節で、booleanの直値ではなく、boolean型の変数を使った例も見ていきます。
window.onload = function () {
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値の反転の反転を行うことになりますので注意してください。
window.onload = function () {
var 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"のみです。
window.onload = function () {
// 真偽値判定・比較・反転
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型のコンストラクタと対応が取れているようですね。
window.onload = function () {
// 反転
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の２つはtrueでもfalseでもない値と判定されています。
window.onload = function () {
// その他の真偽値判定・比較・反転
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となります。
window.onload = function () {
//反転
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」と判定されていることがわかります。
window.onload = function () {
// 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
まとめ
今回は、「boolean型」について学習しました！
学習のポイントを振り返ってみましょう！
・文字列型、数値型、オブジェクト型からbooleanへの変換結果
・booleanのif判定方法
・boolean変数の反転方法
・真偽値判定・比較・反転させた結果
・Boolean型の型の判定方法
以上の内容を再確認し、ぜひ自分のプログラムに生かし学習を進めてください！
