スライドショー

【JavaScript入門】boolean型の使い方(文字列変換/判定/反転)

こんにちは!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.

最初に変数boolvaluetrueを代入しています。

最初の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.0true0と0.0falseと判定されています。

nullとundefinedの2つは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.0falseに反転(反転元はtrue)、0と0.0trueに反転(反転元は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型の型の判定方法

以上の内容を再確認し、ぜひ自分のプログラムに生かし学習を進めてください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

貝原 輝昌

貝原 輝昌

こんにちは!貝原(@touhicomu)と申します。
現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
以下の活動も行っています。
 ・笑楽井石のブログ
 ・エクセル関数を日本語化するソフト
 ・エクセルVBAを日本語で記述するソフト

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説