Как вы используете? : (условный) оператор в JavaScript?

434

Может кто-нибудь объяснить, пожалуйста, простыми словами, что такое ?:(условный, «троичный») оператор и как его использовать?

muudless
источник
2
Это операторы. Операнды - это значения, с которыми вы используете эти операторы.
BoltClock
7
Интересный факт: некоторые языки (а именно Groovy ) на самом деле имеют операнд ?:(как вы его написали, без оператора между ними) - оператор Элвиса . Довольно умно.
Роб Хруска
возможно дублирование javascript, если альтернатива
Роб Хруска
3
Символы поиска в Google могут быть проблематичными, но как насчет поиска в Google "операторов 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
Третичная форма @tringToGetProgrammingStraight технически является выражением, и выражения могут содержать другие выражения для формирования деревьев выражений. этот код прямо там, как выглядит дерево выражений :) смотрите: 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 ... else будет неудобным. Например:

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

В примере создается строка, содержащая «Добрый вечер». если это после 6 вечера. Эквивалентный код, использующий оператор if ... else, будет выглядеть следующим образом:

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

Из документации MSDN JS .

По сути это условное заявление.

Также см:

Майкл Робинсон
источник
5
На самом деле это называется условный оператор.
ChaosPandion
5
Это троичный условный оператор
Петах
4
@Michael - см. Раздел 11.12 Условный оператор (? :)
ChaosPandion
7
Люди все еще спорят по этому поводу? Geez.
BoltClock
7
@BoltClock - не совсем спорю, просто пытаюсь нормализовать наш основной словарный запас.
ChaosPandion
21

Гуглить немного сложно, когда все, что у вас есть, это символы;) Используемые термины "условный оператор javascript".

Если вы видите более забавные символы в Javascript, вам следует сначала поискать операторы Javascript: список операторов MDC . Единственное исключение, с которым вы можете столкнуться, это $символ .

Чтобы ответить на ваш вопрос, условные операторы заменяют простые операторы if. Пример лучше всего:

var insurancePremium = age > 21 ? 100 : 200;

Вместо:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}
Дэвид Тан
источник
Хорошее объяснение, но пример плохой, поскольку он присваивает логическое значение в зависимости от результата логического выражения, что не имеет большого смысла. Вы бы предпочли использовать var olderThan20 = age > 20;вместо этого.
BalusC
@BalusC - да :) Я понял это, но примеры трудно вытащить из моей шляпы! Будет думать о лучшем ...
Дэвид Тан
9
z = (x == y ? 1 : 2);

эквивалентно

if (x == y)
    z = 1;
else
    z = 2;

кроме, конечно, это короче.

Эрнест Фридман-Хилл
источник
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; }
}

Более подробная информация здесь

Arif
источник
1
Это то, что я ищу.
Сазал Дас
6

Это называется троичный оператор

tmp = (foo==1 ? true : false);
eagle12
источник
6
Это называется условным оператором. Это происходит , чтобы быть единственным примером в тройном оператора на языке.
Гонки легкости на орбите
tmp = foo == 1 делает то же самое, так что этого будет достаточно
Роберт Варга
6

Троичный оператор

Обычно у нас есть условные заявления в Javascript.

Пример:

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

но он содержит две или более строки и не может быть назначен переменной. У Javascript есть решение этой проблемы. Тернарный оператор . Тернарный оператор может писать в одну строку и назначать переменную.

Пример:

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

Этот троичный оператор похож на язык программирования Си.

Simplans
источник
5

Эй, приятель, просто помни js works, оценивая либо true, либо false, верно?

давайте возьмем троичный оператор:

questionAnswered ? "Awesome!" : "damn" ;

Во-первых, js проверяет, является ли questionAnspted trueили false.

if true( ?) вы получите "Awesome!"

иначе ( :) вы получите "черт";

Надеюсь, это поможет другу :)

Гай Керен
источник
2

Это if statementвсе на одной линии.

Так

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

Выражение для оценки находится в ( )

Если оно соответствует true, выполните код после ?

Если он соответствует ложному, выполните код после :

Джейсон Дженнаро
источник
var x = 1; у = (х == 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 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>

Ajay2707
источник
1

Тернарные выражения очень полезны в JS, особенно в React. Вот упрощенный ответ на многие хорошие, подробные из них.

condition ? expressionIfTrue : expressionIfFalse

Думайте о expressionIfTrueтом, что OG if делает заявление истинным;
думать expressionIfFalseкак о другом утверждении.

Пример:

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

это проверило значение x, первое y = (значение) вернулось, если true, второе возвращение после двоеточия: вернул y = (значение), если false.

PBrook
источник
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.

Srikrushna
источник
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;

состояние ? если 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 ?.it должно бытьsun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley
весь смысл условной троицы заключается в сокращении значений условного присваивания, в противном случае вам просто нужно использовать оператор if
TheRealMrCrowley
теперь скажите мне, это правильно или нет. если вы говорите неправильно, то все равно это работает, и я использую свой проект ..
Чандрашехар Комати
Я знаю, что это «работает» так, как у вас в первом примере, но также и то, что я предоставил, вы указали в качестве второй версии. Обратите внимание, сколько ненужного дублирования есть в топ-версии по сравнению с той, которую я вам дал. JS - это код, который отправляется в браузер, поэтому длина кода имеет значение
TheRealMrCrowley