使用？：的功能说明（javascript中的条件运算符）

Question

I'm trying to understand this function that returns the ordinal numbers when we give it a number.

Unfortunately I couldn't figure out how this is working with the conditional operator, could someone explain it to me?

function getOrdinalNum(n) {
  return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');
}

Answer 1

The best way to explain this sort of thing is to break it down into a function with if statements. Take a look at the newFunction it does the same thing that the function getOrdinalNum does:

 function getOrdinalNum(n) { return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : ''); } function newFunction(n) { if (n > 0) { if ((n > 3 && n < 21) || n % 10 > 3) { return n + 'th'; // essentially returning ['th', 'st', 'nd', 'rd'][0]; } else { return n + ['th', 'st', 'nd', 'rd'][n % 10]; } } } for(let i = 1; i < 9; i++) { console.log(getOrdinalNum(i)); console.log(newFunction(i)); } 

Answer 2

Break it down like this:

n + 
(
 n > 0 
 ? ['th', 'st', 'nd', 'rd']
     [
       (n > 3 && n < 21) || n % 10 > 3 
       ? 0 
       : n % 10
     ] 
 : ''
);

Here:

1. JS checks if n > 0 . If yes then:
   1. An array is created ['th', 'st', 'nd', 'rd']
   2. The next [] tells us a property accessor will follow
   3. Which property is determined by the ternary operation. Either 0 (which will mean ( th ) or the result of n & 10
   4. And the result of accessing that property is added whatever n was.
2. If n is smaller or equal with 0 then whatever n was, an empty string is added to it.

It helps to know the operator precedence in JS . Give it a goooood read and practice some.

Answer 3

Operators (unary, binary, ternary)

The ternary conditional operator is different than most other operators in that it takes 3 operands instead of one or two.

You are used to unary operators like the negative symbol in -5 which takes one operand and makes it a negative value.

There is also the binary concatenation operator + used like 'hello ' + 'world' . Here there are two operands which produce the value 'hello world' .

The ternary conditional operator has the form

/* conditional expression */ ? /* expression if truthy */ : /* expression if not truthy*/

Where the comments are the operands for you to fill in with the more complex code from your example. // if n > 0 then the complex expression, otherwise the empty string

Simple example.

Try to run the following statements in your browser.

console.log(true ? 'true value' : 'false value');

var x = 3 > 1 ? 'true value' : 'false value';
console.log(x);

prompt('try entering a blank space, or characters') ? 'a' : 'b';

The code flows much the same as the other answers describe. The first expression is emitted if the condition is truthy otherwise the second expression is emitted.

Here are some docs on what I mean by truthy