당신은 어떻게 사용합니까? : JavaScript의 (조건부) 연산자?


434

누군가 ?:(조건부, "삼항") 연산자 란 무엇이며 사용법 은 간단한 단어로 설명해 주 시겠습니까?


2
그것들은 연산자입니다. 피연산자는이 연산자와 함께 사용하는 값입니다.
BoltClock

7
재미있는 사실 : 일부 언어 (즉, Groovy )에는 실제로 피연산자가 있습니다 ?:(당신이 작성한대로 사이에 문장이 없습니다) -Elvis operator . 꽤 영리합니다.
Rob Hruska 2016 년


3
인터넷 검색 기호는 문제가 될 수 있지만 인터넷 검색 '자바 스크립트 연산자'(및 이들 모두 학습)는 어떻습니까?
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 개의 부분이 있습니다). 의 이름을 특정의 삼항 연산자 는 IS conditional operator. JS에는 삼항 연산자가 하나만 있으므로 용어가 잘못 사용됩니다.
사라 코딩

1
@tryingToGetProgrammingStraight 삼항 형식은 기술적으로 식이며 식에는 식 트리를 형성하기위한 다른식이 포함될 수 있습니다. 그 코드는 바로 표현 트리의 모습입니다 :) 참조 : fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup

1
운영자의 학대로 자주 인용되는 부작용 유스 케이스가 아니라 일반적인 유스 케이스에 대한 예제를 업데이트하는 것이 좋습니다.
TJ Crowder

7
하단에 문법 흐림이 왜 있는지 잘 모르지만 잘못되었습니다. 자바 스크립트에 연산자 유형 중 하나만있는 경우에는 삼항 연산자가 아닌 삼항 연산자를 말하는 것이 옳습니다 ... "이 삼항 연산자는 자바 스크립트의 삼항 연산자입니다." 바보, 그냥 사용하고 그것은 모든 것을 의미합니다.
앤드류

1
@MarkCarpenterJr 자바 스크립트에서이를 수행하는 일반적인 방법 ||은 왼쪽 값이 사실이면 단락되기 때문에 연산자를 사용하는 것입니다.
피터 올슨

142

주어진 답변에 일부 를 추가 하고 싶습니다 .

'변수가 설정된 경우 변수 표시 ...'와 같은 상황에서 삼항을 만나거나 사용하려는 경우 삼항없이 더 짧게 만들 수 있습니다 .


대신에:

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

당신이 사용할 수있는:

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

이것은 PHP의 속기 삼항 연산자와 동등한 Javascript입니다. ?:

또는:

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

변수를 평가하고, 거짓이거나 설정되지 않은 경우 다음으로 넘어갑니다.


4
나는 삼항 문제로 고생하고 결국이 대답을 찾았습니다. 감사합니다!
Ljubisa Livac

내가라면에 삼항 연산자 주위에 괄호를 사용하지 'Hello ' + (username ? username : 'guest'), Hello + 무시하고 단지 삼항 작업의 결과가 반환되는 경우. 아무도 이유를 설명 할 수 있습니까?
시바

2
brackes없이 @Shiva, 그것은 evalutes 전체 : 왼쪽 'Hello ' + username, 항상 true이 0보다 길이 이상으로 표기되어있는 문자열이기 때문에,
제프리 Roosendaal의

26

이를 '삼항'또는 '조건부'연산자라고합니다.

? : 연산자는 if ... else 문의 바로 가기로 사용할 수 있습니다. 일반적으로 if ... else 문이 어색한 큰 식의 일부로 사용됩니다. 예를 들면 다음과 같습니다.

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

이 예에서는 "Good night"을 포함하는 문자열을 만듭니다. 오후 6시 이후 인 경우 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 2018

7
사람들은 여전히이 물건에 대해 논쟁하고 있습니까? 이런.
BoltClock

7
@BoltClock-정확히 말다툼이 아니라, 본질적인 어휘를 정규화하려고 노력하십시오.
ChaosPandion

21

당신이 가진 모든 것이 기호 일 때 구글에 조금 어렵습니다;) 사용하는 용어는 "자바 스크립트 조건부 연산자"입니다.

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-예 :) 나는 그것을 깨달았지만 예제는 내 모자에서 꺼내기가 어렵습니다! 더 나은 것을 생각할 것입니다 ...
David Tang


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 1

6

삼항 연산자라고합니다

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

6
조건부 연산자라고합니다. 의 유일한 예 될 일이 언어 삼항 연산자.
가벼움 궤도에서

tmp = foo == 1도 같은 일을하므로 충분합니다
Robert Varga

6

삼항 연산자

일반적으로 Javascript에는 조건문이 있습니다.

예:

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

그러나 둘 이상의 행을 포함하며 변수에 지정할 수 없습니다. 자바 스크립트에는이 문제에 대한 해결책이 있습니다. Ternary Operator 있습니다. 삼항 연산자는 한 줄로 쓰고 변수에 할당 할 수 있습니다.

예:

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

이 Ternary 연산자는 C 프로그래밍 언어와 유사합니다.


5

친구는 js 작품을 참 또는 거짓으로 평가하여 기억합니다.

삼항 연산자를 보자.

questionAnswered ? "Awesome!" : "damn" ;

먼저 js는 questionAnswered가 true또는 인지 확인합니다 false.

경우 true(? 당신이 얻을 것이다) "신난다!"

그렇지 않으면 ( : ) "망할"것이다;

친구에게 도움이되기를 바랍니다 :)


2

그것은 if statement 모두 한 줄에.

그래서

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

평가할 식은 ( )

일치하는 경우 다음 코드를 실행하십시오. ?

false와 일치하면 다음 코드를 실행하십시오. :


var x = 1; y = (x == 1)? 허위 사실;
augurone

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. 더 많은 정보를 위해, 이것에 관해 내가 대답 한 또 다른 질문이 있습니다.

'else'없이 IF else 문을 작성하는 방법


4
실제로 삼항은 연산자 의 유형 입니다 (즉, 세 부분으로 구성). 의 이름을 특정의 삼항 연산자 는 IS 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와 length를 함께 사용할 수 있습니다.

값이 있고 이름과 성을 얻으려는 GuarantorName 텍스트 상자가 있다고 가정합니다. null 일 수 있습니다. 라 타르보다

        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

expressionIfTrueOG if 문 렌더링이 참 이라고 생각하십시오 .
~에 대해 생각하다expressionIfFalseelse 서술문으로 하십시오.

예:

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

이것은 x의 값을 확인했는데, 첫 번째 y = (value)는 true이면 반환되고, 두 번째는 콜론 다음에 반환됩니다. y = (value)는 false 인 경우 반환되었습니다.


0

조건부 (삼항) 연산자는 세 개의 피연산자를 사용하는 유일한 JavaScript 연산자입니다. 이 연산자는 if 문의 바로 가기로 자주 사용됩니다.

condition ? expr1 : expr2 

조건이 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

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을 추가 할 수 있습니다
Chandrashekhar Komati

그게 정말 당신이하지 == 다른 현명한 당신은뿐만 아니라 단지 할 수 === 사용도 원 할당을 작성해야하지 어떻게 sunday ?.IT가 있어야한다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.