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

Question

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

Answer 1

Это if statement все в одной строке.

Итак

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

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

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

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

Answer 2

Возможно, это не самый элегантный способ сделать это. Но для тех, кто не знаком с троичными операторами, это может оказаться полезным. Мое личное предпочтение - сделать 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);

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

Answer 3

Мы можем использовать с 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>

Answer 4

Это называется ternary operator. Для получения дополнительной информации вот еще один вопрос, на который я ответил:

Как написать оператор IF else без 'else'

Answer 5

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

condition ? expressionIfTrue : expressionIfFalse

Думайте о expressionIfTrue как о выражении OG if, верном;
думайте о expressionIfFalse как о выражении else.

Пример:

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

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

Answer 6

Условный (троичный) оператор является единственным оператором 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

Answer 7

 (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>"