คุณใช้งานอย่างไร : ผู้ประกอบการ (เงื่อนไข) ใน JavaScript?


434

ใครสามารถช่วยอธิบายให้ฉันด้วยคำพูดง่ายๆสิ่งที่ผู้ประกอบการ?:(เงื่อนไข "ประกอบไปด้วย") และวิธีการใช้งานคืออะไร?


2
นั่นคือผู้ประกอบการ ตัวถูกดำเนินการเป็นค่าที่คุณใช้ตัวดำเนินการเหล่านี้ด้วย
BoltClock

7
สนุกจริง: บางภาษา (คือGroovy ) จริงมีตัวถูกดำเนินการ?:(ตามที่คุณได้เขียนมันด้วยกับคำสั่งระหว่างไม่ได้) - มีผู้ประกอบการเอลวิส ค่อนข้างฉลาด
Rob Hruska


3
สัญลักษณ์ของ Google เป็นปัญหา แต่วิธีการเกี่ยวกับ "ผู้ดำเนินการ Javascript" ของ Googling (และเรียนรู้ทั้งหมด)
nnnnnn

ตรวจสอบรายการวิกินี้en.wikipedia.org/wiki/Elvis_operator
Nerdroid

คำตอบ:


645

นี่เป็นชวเลขหนึ่งบรรทัดสำหรับคำสั่ง if-else มันเรียกว่าผู้ประกอบการตามเงื่อนไข 1

นี่คือตัวอย่างของโค้ดที่สามารถย่อให้สั้นลงด้วยโอเปอเรเตอร์ที่มีเงื่อนไข:

var userType;
if (userIsYoungerThan18) {
  userType = "Minor";
} else {
  userType = "Adult";
}

if (userIsYoungerThan21) {
  serveDrink("Grape Juice");
} else {
  serveDrink("Wine");
}

สิ่งนี้สามารถสั้นลงได้?:เช่น:

var userType = userIsYoungerThan18 ? "Minor" : "Adult";

serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");

เช่นเดียวกับทุกนิพจน์ตัวดำเนินการแบบมีเงื่อนไขสามารถใช้เป็นคำสั่งแบบสแตนด์อโลนที่มีผลข้างเคียงได้แม้ว่านี่จะผิดปกตินอกการลดขนาด:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

พวกเขาสามารถถูกล่ามโซ่:

serveDrink(userIsYoungerThan4 ? 'Milk' : userIsYoungerThan21 ? 'Grape Juice' : 'Wine');

ระวังให้ดีมิฉะนั้นคุณจะต้องจบด้วยโค้ดที่ซับซ้อนเช่นนี้:

var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j;

1 มักจะเรียกว่า "ผู้ประกอบการที่ประกอบไปด้วย" แต่ในความเป็นจริงมันเป็นเพียงแค่ประกอบ ternary [ผู้ประกอบการยอมรับสามตัวถูกดำเนินการ] มันเป็นจาวาสคริปต์เดียวเท่านั้นที่มีอยู่ในปัจจุบัน


56
เพียงชี้แจงชื่อ: ternaryเป็นประเภทของผู้ปฏิบัติงาน (เช่นมี 3 ส่วน) ชื่อของผู้ประกอบการที่เฉพาะเจาะจง ternary ว่าconditional operatorเป็น มีเพียงเกิดขึ้นกับผู้ประกอบการที่สามเท่านั้นใน JS เพื่อให้ข้อกำหนดได้รับในทางที่ผิด
Gone Coding

1
@tryingToGetProgrammingStraight ฟอร์ม ternary เป็นเทคนิคในการแสดงออกและนิพจน์สามารถมีนิพจน์อื่น ๆ เพื่อสร้างต้นไม้นิพจน์ โค้ดนั้นมีสิ่งที่ต้นไม้แสดงออกดูเหมือน :) ดู: fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup

1
ขอแนะนำอย่างยิ่งให้อัปเดตตัวอย่างสำหรับกรณีการใช้งานทั่วไปไม่ใช่กรณีการใช้ที่มีผลข้างเคียงที่มักถูกอ้างถึงว่าเป็นการละเมิดผู้ปฏิบัติงาน
TJ Crowder

7
ไม่แน่ใจว่าทำไมมีไวยากรณ์เล็กน้อยแจ้งแจ้งที่ด้านล่าง แต่ไม่ถูกต้อง หากจาวาสคริปต์มีประเภทของผู้ให้บริการเพียงประเภทเดียวก็ถือว่าถูกต้องแน่นอนที่จะพูดผู้ประกอบการที่สามและไม่ใช่ผู้ประกอบการที่สาม ... กล่าวว่า "ผู้ประกอบการที่ประกอบไปด้วยผู้ประกอบการที่สาม โง่แค่ใช้ THE และมันก็หมายถึงสิ่งนั้นทั้งหมด
แอนดรูว์

1
@MarkCarpenterJr ใน JavaScript วิธีทั่วไปในการทำเช่นนั้นกับ||ผู้ประกอบการเนื่องจากมันลัดวงจรถ้าค่าทางด้านซ้ายเป็นความจริง
Peter Olson

142

ฉันต้องการเพิ่มบางคำตอบที่ได้รับ

ในกรณีที่คุณพบ (หรือต้องการใช้) ternary ในสถานการณ์เช่น 'แสดงตัวแปรถ้ามันของชุดอื่น ...' คุณสามารถทำให้มันยิ่งสั้นลงโดยไม่ต้องประกอบไปด้วย


แทน:

var welcomeMessage  = 'Hello ' + (username ? username : 'guest');

คุณสามารถใช้ได้:

var welcomeMessage  = 'Hello ' + (username || 'guest');

นี่คือ Javascripts ที่เทียบเท่ากับตัวดำเนินการแบบย่อของ PHP ?:

หรือแม้กระทั่ง:

var welcomeMessage  = 'Hello ' + (username || something || maybethis || 'guest');

มันประเมินตัวแปรและถ้ามันเป็นเท็จหรือไม่ได้ตั้งค่ามันจะไปต่อที่


4
ฉันกำลังดิ้นรนกับไตรภาคและในที่สุดก็พบคำตอบนี้ ขอบคุณ!
Ljubisa Livac

ถ้าฉันจะไม่ใช้เครื่องหมายวงเล็บรอบประกอบ ternary ใน 'Hello ' + (username ? username : 'guest'), Hello + หากละเลยและเพียงแค่ผลของการดำเนินงาน ternary จะถูกส่งกลับ มีใครอธิบายได้บ้างไหม
พระอิศวร

2
@ Shiva หากไม่ใส่วงเล็บปีกกาก็จะเห็นส่วนด้านซ้ายทั้งหมด : 'Hello ' + usernameซึ่งเป็นเสมอtrueเพราะเป็นสตริงที่มีความยาวมากกว่า 0
Jeffrey Roosendaal

26

มันเรียกว่าผู้ประกอบการ 'ประกอบไปด้วย' หรือ 'เงื่อนไข'

ตัวอย่าง

ตัวดำเนินการ?: สามารถใช้เป็นทางลัดสำหรับคำสั่ง if ... else โดยทั่วไปจะใช้เป็นส่วนหนึ่งของนิพจน์ที่มีขนาดใหญ่ขึ้นซึ่งคำสั่ง if ... else จะอึดอัด ตัวอย่างเช่น:

var now = new Date();
var greeting = "Good" + ((now.getHours() > 17) ? " evening." : " day.");

ตัวอย่างสร้างสตริงที่มี "สวัสดีตอนเย็น" ถ้าหลัง 18.00 น. รหัสเทียบเท่าโดยใช้คำสั่ง if ... else จะมีลักษณะดังนี้:

var now = new Date();
var greeting = "Good";
if (now.getHours() > 17)
   greeting += " evening.";
else
   greeting += " day.";

จากเอกสาร MSDN JS

โดยทั่วไปมันเป็นคำสั่งที่มีเงื่อนไขชวเลข

ดูเพิ่มเติมที่:


5
จริงๆแล้วมันเรียกว่าโอเปอเรเตอร์ที่มีเงื่อนไข
ChaosPandion

5
มันเป็นผู้ประกอบการเงื่อนไขแบบสามมิติ
Petah

4
@Michael - โปรดดูในส่วน11.12 เงื่อนไขผู้ประกอบการ: (?)ของสเปค: ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
ChaosPandion

7
ผู้คนยังถกเถียงเรื่องนี้อยู่หรือเปล่า? โธ่
BoltClock

7
@BoltClock - ไม่โต้เถียงเพียงแค่พยายามทำให้ปกติคำศัพท์ที่จำเป็นของเรา
ChaosPandion

21

มันยากที่จะ google เล็กน้อยเมื่อคุณมีสัญลักษณ์;) ข้อกำหนดในการใช้คือ "ตัวดำเนินการตามเงื่อนไข javascript"

หากคุณเห็นใด ๆ สัญลักษณ์ตลกมากใน Javascript คุณควรลองมองขึ้นไปผู้ประกอบการ Javascript เป็นครั้งแรก: รายการ MDC ของผู้ประกอบการ หนึ่งยกเว้นคุณมีแนวโน้มที่จะพบเป็นสัญลักษณ์$

ในการตอบคำถามของคุณผู้ดำเนินการตามเงื่อนไขจะแทนที่คำสั่งง่าย ๆ ตัวอย่างที่ดีที่สุด:

var insurancePremium = age > 21 ? 100 : 200;

แทน:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}

คำอธิบายที่ดี แต่ตัวอย่างไม่ดีเนื่องจากมีการกำหนดค่าบูลีนขึ้นอยู่กับผลลัพธ์ของนิพจน์บูลีนซึ่งทำให้มีความรู้สึกเล็กน้อย คุณต้องการใช้var olderThan20 = age > 20;แทน
BalusC

@BalusC - ใช่ :) ฉันรู้ว่า แต่ตัวอย่างยากที่จะดึงออกมาจากหมวกของฉัน! จะคิดถึงสิ่งที่ดีกว่า ...
David Tang


7

คำตอบส่วนใหญ่นั้นถูกต้อง แต่ฉันต้องการเพิ่มอีกหน่อย ประกอบ ternaryเป็นขวาเชื่อมโยงซึ่งหมายความว่ามันสามารถถูกล่ามโซ่ในลักษณะดังต่อไปนี้if … else-if … else-if … else:

function example() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

เทียบเท่ากับ:

function example() {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

รายละเอียดเพิ่มเติมอยู่ที่นี่


1
นี่คือสิ่งที่ฉันกำลังค้นหา
Sazal Das

6

มันถูกเรียกว่าผู้ประกอบการที่สาม

tmp = (foo==1 ? true : false);

6
มันถูกเรียกว่าผู้ประกอบการตามเงื่อนไข มันเกิดขึ้นเป็นตัวอย่างเพียงอย่างเดียวของประกอบ ternary ในภาษาที่
การแข่งขัน Lightness ใน Orbit

tmp = foo == 1 ทำสิ่งเดียวกันดังนั้นมันจะเพียงพอ
Robert Varga

6

ผู้ประกอบการที่สาม

โดยทั่วไปเรามีคำสั่งแบบมีเงื่อนไขใน Javascript

ตัวอย่าง:

if (true) {
    console.log(1)
} 
else {
    console.log(0)
}
# Answer
# 1

แต่มีสองบรรทัดขึ้นไปและไม่สามารถกำหนดให้กับตัวแปรได้ JavaScript มีทางออกสำหรับปัญหานี้Ternary ผู้ประกอบการ ผู้ประกอบการ Ternary สามารถเขียนในหนึ่งบรรทัดและกำหนดให้กับตัวแปร

ตัวอย่าง:

var operator = true ? 1 : 0
console.log(operator)
# Answer
# 1

ผู้ประกอบการ Ternary นี้คล้ายกันในภาษาการเขียนโปรแกรม C


5

สวัสดีเพื่อน ๆ จำไว้แค่ว่า js ทำงานโดยการประเมินว่าจริงหรือเท็จใช่ไหม?

มารับผู้ประกอบการที่สาม:

questionAnswered ? "Awesome!" : "damn" ;

อันดับแรก js จะตรวจสอบว่ามีคำตอบtrueหรือfalseไม่

ถ้า true( ?) คุณจะได้รับ "ยอดเยี่ยม!"

อื่น ( :) คุณจะได้รับ "ไอ้";

หวังว่าจะช่วยเพื่อน :)


2

มันคือif statementทั้งหมดในบรรทัดเดียว

ดังนั้น

var x=1;
(x == 1) ? y="true" : y="false";
alert(y);

การแสดงออกที่จะประเมินอยู่ใน ( )

หากตรงกับความจริงรันรหัสหลังจาก ?

หากตรงกับเท็จรันรหัสหลังจาก :


var x = 1; y = (x == 1)? ถูกผิด;
augurone

2
x = 9
y = 8

เอก

++x
--x

ไบนารี่

z = x + y

ประกอบไปด้วย 3 อย่าง

2>3 ? true : false;
2<3 ? true : false;
2<3 ? "2 is lesser than 3" : "2 is greater than 3";

1

ternary operatorมันเรียกว่า สำหรับข้อมูลเพิ่มเติมนี่คือคำถามที่ฉันตอบเกี่ยวกับเรื่องนี้:

วิธีเขียนคำสั่ง IF else ที่ไม่มี 'else'


4
ternary จริง ๆ แล้วเป็นประเภทของผู้ประกอบการ (เช่นมันมี 3 ส่วน) ชื่อของผู้ประกอบการที่เฉพาะเจาะจง ternary ว่าconditional operatorเป็น มีเพียงเกิดขึ้นกับผู้ประกอบการที่สามเท่านั้นใน JS เพื่อให้ข้อกำหนดได้รับในทางที่ผิด
Gone Coding

1

นี่อาจไม่ใช่วิธีที่ยอดเยี่ยมที่สุดในการทำเช่นนี้ แต่สำหรับคนที่ไม่คุ้นเคยกับผู้ประกอบการที่ประกอบไปด้วยสิ่งนี้อาจพิสูจน์ได้ว่ามีประโยชน์ การตั้งค่าส่วนตัวของฉันคือทำทางเลือกหนึ่งซับแทนการบล็อกตามเงื่อนไข

  // var firstName = 'John'; // Undefined
  var lastName = 'Doe';

  // if lastName or firstName is undefined, false, null or empty => fallback to empty string
  lastName = lastName || '';
  firstName = firstName || '';

  var displayName = '';

  // if lastName (or firstName) is undefined, false, null or empty
  // displayName equals 'John' OR 'Doe'

  // if lastName and firstName are not empty
  // a space is inserted between the names
  displayName = (!lastName || !firstName) ? firstName + lastName : firstName + ' ' + lastName;


  // if display name is undefined, false, null or empty => fallback to 'Unnamed'
  displayName = displayName || 'Unnamed';

  console.log(displayName);

ผู้ประกอบการที่สาม


1

เราสามารถใช้กับ Jquery ได้เช่นเดียวกับความยาวดังตัวอย่าง:

สมมติว่าเรามีช่องข้อความค้ำประกันซึ่งมีค่าและต้องการรับชื่อและนามสกุล - อาจเป็นโมฆะ ดังนั้น rathar กว่า

        var gnamesplit = $("#txtGuarantorName").val().split(" ");
        var gLastName = "";
        var gFirstName = "";
        if(gnamesplit.length > 0 ){
           gLastName  = gnamesplit[0];        
        }
        if(gnamesplit.length > 1 ){
           gFirstName = gnamesplit[1];        
        }

เราสามารถใช้โค้ดด้านล่างกับ Jquery ด้วยรหัสขั้นต่ำ

    

    var gnamesplit = $("#txtGuarantorName").val().split(" ");
    var gLastName = gnamesplit.length > 0  ? gnamesplit[0] : "";
    var gFirstName =  gnamesplit.length > 1  ? gnamesplit[1] : "";
    $("#txtLastName").val(gLastName);
    $("#txtFirstName").val(gFirstName);
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div >
  Guarantor Name: <input type="text" id="txtGuarantorName" value="ASP.NET Core"  /><br/>
  <br/>
  <br/>
  
  First Name: <input type="text" id="txtLastName" value="ASP.NET Core"  />
  Last Name: <input type="text" id="txtFirstName" value="ASP.NET Core"  />
</div>


1

นิพจน์แบบไตรภาคจะมีประโยชน์มากใน JS โดยเฉพาะอย่างยิ่ง React ต่อไปนี้เป็นคำตอบที่ง่ายสำหรับคำตอบดี ๆ ที่มีรายละเอียดมากมาย

condition ? expressionIfTrue : expressionIfFalse

คิดว่าexpressionIfTrueเป็น OG ถ้าคำสั่งแสดงผลจริง;
คิดว่าexpressionIfFalseเป็นคำสั่งอื่น

ตัวอย่าง:

var x = 1;
(x == 1) ? y=x : y=z;

สิ่งนี้จะตรวจสอบค่าของ x, y = (ค่า) แรกที่ส่งคืนถ้าเป็นจริงผลตอบแทนที่สองหลังจากที่ลำไส้ใหญ่: กลับมา y = (ค่า) ถ้าเท็จ


0

ตัวดำเนินการตามเงื่อนไข (ประกอบไปด้วย) เป็นตัวดำเนินการ JavaScript เท่านั้นที่ใช้ตัวถูกดำเนินการสามตัว ตัวดำเนินการนี้มักใช้เป็นทางลัดสำหรับคำสั่ง if

condition ? expr1 : expr2 

ถ้า condition เป็น true ตัวดำเนินการคืนค่า expr1 มิฉะนั้นจะส่งคืนค่า expr2

function fact(n) {
  if (n > 1) {
    return n * fact(n-1);
  } else {
    return 1;
  }
  // we can replace the above code in a single line of code as below
  //return (n != 1) ? n * fact(n - 1) : 1;
}
console.log(fact(5));

สำหรับคำชี้แจงเพิ่มเติมโปรดอ่านลิงค์เอกสาร MDN


0

หากคุณมีเงื่อนไขหนึ่งฟังก์ชั่นเช่นการตรวจสอบในจาวาสคริปต์ มันเป็นเรื่องง่ายที่จะใช้ประกอบ ternary ซึ่งจะต้องการเพียงหนึ่งบรรทัดที่จะใช้ Ex:

    private module : string ='';
    private page:boolean = false;
    async mounted(){
     if(this.module=== 'Main')
    {
    this.page = true;}
    else{
    this.page = false;
    }
}

ฟังก์ชั่นเช่นนี้ที่มีเงื่อนไขเดียวสามารถเขียนได้ดังนี้

this.page = this.module=== 'Main' ?true:false;

เงื่อนไข ? ถ้าเป็นจริง: ถ้าเป็นเท็จ


-3
 (sunday == 'True') ? sun="<span class='label label-success'>S</span>" : sun="<span class='label label-danger'>S</span>";

 sun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"

คุณสามารถผนวก html ด้วยตัวดำเนินการแบบไตรภาค
Chandrashekhar Komati

นั่นไม่ใช่วิธีที่คุณควรเขียนการมอบหมายแบบไตรภาคและใช้ === ไม่ใช่ == คนฉลาดอื่น ๆ ที่คุณอาจทำได้เช่นกันมันsunday ?ควรจะเป็นsun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley

จุดรวมของเงื่อนไขแบบไตรภาคคือการลดค่าการมอบหมายแบบมีเงื่อนไขมิฉะนั้นคุณควรใช้คำสั่ง if
TheRealMrCrowley

ตอนนี้บอกฉันว่าอันนี้ถูกต้องหรือไม่ ถ้าคุณพูดผิดก็ยังใช้งานได้อยู่และฉันกำลังใช้โครงการของฉัน ..
Chandrashekhar Komati

ฉันรู้ว่ามันใช้งานได้ดีอย่างที่คุณมีในตัวอย่างแรก แต่อย่างที่ฉันได้จัดเตรียมไว้ให้คุณเป็นเวอร์ชันที่สอง สังเกตุว่ามีการทำซ้ำที่ไม่จำเป็นมากเพียงใดในเวอร์ชันบนสุดเทียบกับที่ฉันให้คุณ JS คือรหัสที่ถูกส่งไปยังเบราว์เซอร์ดังนั้นความยาวของรหัสจึงสำคัญ
TheRealMrCrowley
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.