Як ви користуєтесь? : (умовний) оператор у JavaScript?


434

Може хтось, будь ласка, пояснить мені простими словами, що таке ?:(умовний, "потрійний") оператор і як ним користуватися?


2
Це оператори. Операнди - це значення, з якими ви використовуєте ці оператори.
BoltClock

7
Веселий факт: деякі мови (а саме Groovy ) насправді мають операнда ?:(як ви це написали, без заяви між ними) - оператора Elvis . Досить розумний.
Роб Грушка


3
Символи Googling можуть бути проблематичними, але як щодо Googling "Javascript-операторів" (і вивчити їх усіх)?
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 Часто званий «потрійний оператор» , але насправді це просто трійчастий оператор [оператор приймає три операнда]. Це єдиний на даний момент JavaScript.


56
Просто для уточнення назви: ternaryце тип оператора (тобто він має 3 частини). Ім'я цього конкретного потрійного оператора - conditional operator. В JS просто трапляється лише один потрійний оператор, тому терміни не використовуються.
Пройшов кодування

1
@tryingToGetProgrammingStraight потрійна форма технічно є виразом, і вирази можуть містити інші вирази для формування дерев виразів. цей код прямо є, як виглядає дерево виразів :) див .: fsharpforfunandprofit.com/posts/expressions-vs-statements
Олександр Труп

1
Настійно рекомендую оновити приклад для випадку загального використання, а не випадок використання побічних ефектів, який часто цитується як зловживання оператором.
TJ Crowder

7
Не впевнений, чому внизу є трохи граматичного розмиття, але це неправильно. Якщо у javascript є лише 1 тип оператора, то, безумовно, правильно сказати ТЕРНІЙНИЙ оператор, а не потрійний оператор ... Скажіть, що "цей потрійний оператор - це потрійний оператор у JavaScript (і він єдиний)" нерозумно, просто використовуй ТО, і все це означає.
Андрій

1
@MarkCarpenterJr У JavaScript типовий спосіб зробити це з ||оператором, оскільки це коротке замикання, якщо значення зліва є правдою.
Пітер Олсон

142

Я хочу додати кілька відповідей до наведених відповідей.

Якщо ви зіткнетесь (або хочете скористатися) потрійником у такій ситуації, як "відобразити змінну, якщо вона встановлена, інакше ...", ви можете зробити її ще коротшою, без потрійного .


Замість:

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

Ви можете використовувати:

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

Це Javascripts, еквівалентний термінальному термінальному оператору PHP ?:

Або навіть:

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

Він оцінює змінну, і якщо вона помилкова або не встановлена, вона переходить до наступної.


4
Я боровся з тернаром і врешті знайшов цю відповідь. Дякую!
Любіса Лівач

Якщо я не використовував дужки навколо термінального оператора 'Hello ' + (username ? username : 'guest'), Hello + якщо його ігнорують, і повертається лише результат тристоронньої операції. Хтось може пояснити, чому?
Шива

2
@Shiva Без брекетів він оцінює всю ліву частину: 'Hello ' + usernameщо завжди true, тому що це струна довжиною більше 0.
Джеффрі

26

Це називається "потрійним" або "умовним" оператором.

Приклад

Оператор?: Може бути використаний як ярлик для оператора if ... else. Зазвичай він використовується як частина більшого виразу, де вислів if if ... було б незручним. Наприклад:

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

У прикладі створюється рядок, що містить "Добрий вечір". якщо це після 18 вечора. Еквівалентний код із використанням оператора if ... else виглядатиме так:

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

З документації MSSN JS .

В основному це скорочена умовна заява.

Також дивіться:


5
Це насправді називається умовним оператором.
ChaosPandion

5
Його потрійний умовний оператор
Petah

4
@Michael - Перегляньте розділ 11.12 Умовний оператор (? :)
ChaosPandion

7
Чи досі люди сперечаються з приводу цього матеріалу? Гез.
BoltClock

7
@BoltClock - Не зовсім сперечаючись, просто намагаємось нормалізувати наш основний словниковий запас.
ChaosPandion

21

Гугл трохи важко, коли все, що у вас є, є символами;) Використовувані терміни - "умовний оператор 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 - так :) Я зрозумів це, але приклади важко витягнути з моєї шапки! Подумаємо про кращий ...
Девід Тан


7

Більшість відповідей правильні, але я хочу додати трохи більше. Трійчастий оператор є правоассоціатівним, що означає , що він може бути прикутий наступним чином 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
Його називають умовним оператором. Це відбувається , щоб бути єдиним прикладом в потрійному оператора на мові.
Гонки легкості по орбіті

tmp = foo == 1 робить те саме, що було б достатньо
Роберт Варга

6

Термінальний оператор

Зазвичай ми маємо умовні заяви у Javascript.

Приклад:

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

але він містить два або більше рядків і не може призначити змінну. У Javascript є рішення для цього проблемного оператора . Ternary Operator може писати в один рядок і присвоювати змінній.

Приклад:

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

Цей термінальний оператор подібний мові програмування на C.


5

Ей, приятелю, просто згадай js роботи, оцінюючи їх як істинні чи хибні, правда?

давайте візьмемо потрійного оператора:

questionAnswered ? "Awesome!" : "damn" ;

По- перше, Js перевіряє , чи є questionAnswered trueабо false.

якщо true( ?) ви отримаєте "Awesome!"

else ( :) ви отримаєте "чорт";

Сподіваюся, це допоможе другові :)


2

Це if statementвсе в одному рядку.

Тому

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

Вираз, що підлягає оцінці, знаходиться в ( )

Якщо вона відповідає істині, виконайте код після ?

Якщо він відповідає false, виконайте код після :


var x = 1; y = (x == 1)? правда: хибна;
аугурон

2
x = 9
y = 8

одинарний

++x
--x

Двійкові

z = x + y

Трінарний

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

1

Це називається ternary operator. Для отримання додаткової інформації, ось ще одне питання, на яке я відповів:

Як написати IF-заяву IF else без 'else'


4
Насправді потрійний - це тип оператора (тобто він має 3 частини). Ім'я цього конкретного потрійного оператора - conditional operator. В JS просто трапляється лише один потрійний оператор, тому терміни не використовуються.
Пройшов кодування

1

Це, мабуть, не самий елегантний спосіб зробити це. Але для тих, хто не знайомий з потрійними операторами, це може виявитися корисним. Моя особиста перевага - це робити резервні копії 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, так і довжину, як показано нижче:

Припустимо, у нас є текстове поле GuarantorName, яке має значення і хочемо отримати ім'я та прізвище - воно може бути недійсним. Так ратхар, ніж

        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 

Якщо умова вірна, оператор повертає значення 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

Якщо у вас є одна функція перевірки екземпляра умови в JavaScript . користуватися потрійним оператором просто . для впровадження якої знадобиться лише один рядок . Наприклад:

    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 також із потрійним оператором
Чандрашехар Комати

це насправді не так, як слід писати потрійне завдання, а також використовувати === не == інший розумний, який ви могли б просто зробити. це sunday ?має бутиsun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley

вся суть умовного терміналу полягає в скороченні значень умовного присвоєння, інакше вам слід просто використовувати оператор if
TheRealMrCrowley

тепер скажіть мені, це правильно чи ні. якщо ви скажете неправильно, то все одно це працює, і я використовую свій проект ..
Чандрашехар Комати

Я знаю, що це "працює", як у вас це є в першому прикладі, але це робить те, що я передбачив, що ви поставили його як другу версію. Зауважте, скільки непотрібного дублювання є у верхній версії порівняно з тією, яку я вам дав. JS - код, який надсилається до браузера, тому значення коду має значення
TheRealMrCrowley
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.