如何将多个else if语句转换为三元运算符

Question

How would i convert this if/else statement into a ternary operator instead of using if/else statements. I know this is simple to most javascript developers, but its confusing to me.

  if(this.props.usersWhoAreTyping.length === 0) {
        return null
  } else if(this.props.usersWhoAreTyping.length === 1 ){
      return <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
  }
   else if(this.props.usersWhoAreTyping.length > 1){
        return <p>{this.props.usersWhoAreTyping.join('and')} are typing...</p>
  }

My attempt was something like

 {this.props.usersWhoAreTyping.length === 0 ?  (
          null
 ): (
     <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
 )}
 // not sure how to include the 2nd else if statement in this ternary operator 

Answer 1

I'd recommend sticking to the if/else, as nested ternaries can be confusing to people. But here's how you'd do it:

{this.props.usersWhoAreTyping.length === 0 ? (
  null
) : this.props.usersWhoAreTyping.length === 1 ? (
  <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
) : (
  <p>{this.props.usersWhoAreTyping.join('and')} are typing...</p>
)}

Note: i did make the assumption that the 3 cases cover all possibilities. Ie, length can't be less than 0 or be a fraction. Since we're presumably dealing with an array, that seemed reasonable, and it let me drop the length > 1 check.

Answer 2

Using a ternary operator is simple just this:

  const result =
    this.props.usersWhoAreTyping.length > 0 ? (
      this.props.usersWhoAreTyping.length === 1 ? (
        <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
      ) : (
        <p>{this.props.usersWhoAreTyping.join('and')} are typing...</p>
      )
    ) : null;

Take into account I modified the conditions due to get the case less than 0

Answer 3

If I understand your intentions correctly, there is no need for a ternary.

Example:

render() {
const { usersWhoAreTyping } = this.props

return (
   <div>
    {usersWhoAreTyping.length === 1 && <p>{usersWhoAreTyping[0]} is typing...</p>}
    {usersWhoAreTyping.length > 1 && <p>{usersWhoAreTyping.join('and')} are typing...</p>}
   </div>
)

Answer 4

 switch (this.props.usersWhoAreTyping.length) { case 0: { return null } case 1: { return <p > { this.props.usersWhoAreTyping[0] } is typing... < /p> } case 2: { return <p > { this.props.usersWhoAreTyping.join('and') } are typing... < /p> } default: return null } 

Try this if its okay for you.

Answer 5

As mentioned above nested ternary operators can be confusing and should be avoided. But if you really want to write code without multiple if/else, you can refer this. It uses some ES6 features.

const { usersWhoAreTyping } = this.props;

someFunc = () => {
    if(usersWhoAreTyping && usersWhoAreTyping.length) {
        const translation = usersWhoAreTyping.length === 0 ? 'is' : 'are';
        return <p>{ `${usersWhoAreTyping.join('and')} ${translation} typing...` }</p>
    }
    return null;
}

Answer 6

So, technically you could do what you're asking like this:

 function showTypers(aArrayOfNames) { var iArrayLength = aArrayOfNames.length; return (iArrayLength === 0) ? null : '<p>' + ((iArrayLength > 1) ? aArrayOfNames.join(' and ') + ' are' : aArrayOfNames[0] + ' is') + ' typing...</p>'; } console.log(showTypers([])); console.log(showTypers(['Tom'])); console.log(showTypers(['Tom', 'Dick', 'Harry'])); 

That being said, I honestly wouldn't recommend nesting this particular scenario, specifically because one of the outcomes ( length === 0 ) results in a completely different outcome than the other two (amongst other reasons . . . nested ternary logic can be very confusing). I'd recommend something more along these lines like this:

 function showTypers(aArrayOfNames) { var iArrayLength = aArrayOfNames.length; var sUserNames = ""; if (iArrayLength > 0) { sUserNames = (iArrayLength > 1) ? aArrayOfNames.join(' and ') + ' are' : aArrayOfNames[0] + ' is' ; } else { return null; } return '<p>' + sUserNames + ' typing...</p>'; } console.log(showTypers([])); console.log(showTypers(['Tom'])); console.log(showTypers(['Tom', 'Dick', 'Harry']));