問號？冒號？這是三原運算子

是不是在寫程式的時候看到一行很奇怪的結構，有問號又有冒號，從沒看過這樣的語法，它大概長這樣

var name = ( baby == "boy" ) ? "Mike" : "Jenny";

在 MDN 中查到這稱為

Conditional (ternary) Operator

中文翻譯為，「三元運算子」。

這名字是要我怎麼查啊！！！◢▆▅▄▃-崩╰(〒皿〒)╯潰-▃▄▅▆◣

var name = ( baby == "boy" ) ? "Mike" : "Jenny";

以此為例，先暫時不管前面的 "var name ="，後面主要拆成三個部分，當然是以問號跟冒號來切分，

( baby == "boy") ? "Mike" : "Jenny";
////
A ? B : C;

A 為 true or false 的判斷式，B and C 則是之後的結果。這句語法可理解為，「如果 A 為真，那就是 B，否則 C」，再來翻譯上面那一句，「如果 baby 是 "boy" 的話，那名字就是 "Mike"，不然就叫 "Jenny" 吧！」，所以接下來的兩段程式碼是相等的。

var name = ( baby == "boy" ) ? "Mike" : "Jenny";
////
if( baby == "boy" ) {
    var name = "Mike";
} else {
    var name = "Jenny";
}

姑且不論這對於運行效能上能夠帶來多大的改善，但實際上在很多時候都確實地能簡化程式碼，舉個我最常使用的例子，在使用 sproutSlide 時，常常會因為不同螢幕尺寸需要不同張數的 slide

if( windowW > 960 ) {
    $('#slide').sproutSlide({
        'slideNum': 2,
        'enableDot': false
    });
} else {
    $('#slide').sproutSlide({
        'slideNum': 1,
        'enableDot': false
    });
}

因為在不同的 windowW 下要對 slideNum 做不同的設定，

當然也可以改寫成這樣

if( windowW > 960 )
    var slideNumber = 2;
else
    var slideNumber = 1;

$('#slide').sproutSlide({
    ‘slideNum': slideNumber,
    'enableDot': false
});

但如果用上三元運算子的話

$(‘#slide').sproutSlide({
    'slideNum': (windowW > 960) ? 2 : 1,
    'enableDot': false
});

一切就更簡單明瞭了！

這東西先是「問號」，再來「冒號」，它叫做「三元運算子」，Conditional-Operator。

Originally published at blog.eddiewen.me on May 30, 2015.