带有两个真 (?) 条件运算符的 Javascript 三元运算符

Question

Can somebody help to substitute ? by THEN in the code below please?

return e = this.checked ? i - n > 0 ? 0 : i - n < 10 ? 10 : i - n : i - n < 0 ? 10 : i - n > 10 ? 0 : 10 + i - n

I am especially confused by ? followed by another ? at the start of the statement return e = this.checked ? i - n > 0 ? 0 ..... return e = this.checked ? i - n > 0 ? 0 ..... return e = this.checked ? i - n > 0 ? 0 ..... . What does that mean?

Thanks

Answer 1

Inserting parentheses and indentation, your code is equivalent to:

return e = this.checked
? (
  i - n > 0
  ? 0
  : (
    i - n < 10
    ? 10
    : i - n
  )
)
: (
  i - n < 0
  ? 10
  : (
    i - n > 10
    ? 0
    : 10 + i - n
  )
);

In short, inside the first expression or the second expression, you're allowed to nest further ternary operators, because they resolve to expressions too - though, that doesn't mean it's a good idea, it's quite unreadable.

Using if-else and this tool :

if (this.checked) {
  if (i - n > 0) {
    return 0
  } else {
    if (i - n < 10) {
      return 10
    } else {
      return i - n
    }
  }
} else {
  if (i - n < 0) {
    return 10
  } else {
    if (i - n > 10) {
      return 0
    } else {
      return 10 + i - n
    }
  }
}

Answer 2

For make it more readable you can always add parenthesis to your code as

return e = this.checked ? ( (i - n > 0 )? 0 : (i - n < 10 ? 10 : i - n ) ) : ( (i - n < 0) ? 10 : (i - n > 10 ? 0 : 10 + i - n) )

or divide into separate parts as @Nick Parsons answer.

Answer 3

It might be useful if you break you ternary up into its separate parts. Essentially it has this basic strucutre:

condition ? a : b

Here, a will be executed if the condition evaluates to true , and b will be triggered if it evaluates to false .

So, putting brackets around your separate ternary operators can help clear things up.

return e = this.checked ? (i - n > 0 ? 0 : (i - n < 10 ? 10 : i - n)) : (i - n < 0 ? 10 : (i - n > 10 ? 0 : 10 + i - n))

So here:

• condition is this.checked

• a is (i - n > 0 ? 0 : (i - n < 10 ? 10 : i - n))

• b is (i - n < 0 ? 10 : (i - n > 10 ? 0 : 10 + i - n))

Or, you may find it easier to understand if you convert it into an if-statement like so:

if (this.checked) {
  if (i - n > 0) {
    return 0
  } else {
    if (i - n < 10) {
      return 10;
    } else {
      return i - n;
    }
  }
} else {
  if (i - n < 0) {
    return 10;
  } else {
    if (i - n > 10) {
      return 0;
    } else {
      return 10 + i - n;
    }
  }
}