What is the right way for using ternary operator inside string templates?

Question

I have a getter that has to return a different value depending on existed props. It looks like:

const converter = ({ propsValue }) => {
  return {
     get label() {
         return `${propsValue} ? ${propsValue} : ${anotherValue} ${secondAnotherValue}`
      } 
   }
}

The question is: What is the right syntax for the ternary operator inside string templates literals?

Answer 1

You need to put condition in brackets

const converter = ({ propsValue }) => {
  return {
     get label() {
         return `${propsValue ? propsValue : 'anotherValue'}`
      } 
   }
}

With dynamic value

return `${propsValue ? propsValue : anotherValue}`;

With two dynamic values

return propsValue ? propsValue : `${anotherValue} ${secondAnotherValue}`;

OR

return `${propsValue ? propsValue : anotherValue + ' ' + secondAnotherValue}`;

Answer 2

Answers are there for using the ternary operator

However, if you would like to look for a shorter and better one I would like to suggest one more thing if you just checking the first string in this way, you can also use it like

Solution without using ternary operator

return `${(propsValue ||anotherValue)}`

However, if you have multiple dynamic values you can still use it as

return `${(propsValue ||anotherValue + oneMoreValueHere)}`

and to apply the same in your code,

const converter = ({ propsValue }) => {
  return {
     get label() {
           return `${(propsValue ||anotherValue + oneMoreValueHere)}`
      } 
   }
}

Answer 3

The way to do it inside the quotes would be
return `${propsValue? propsValue: anotherValue} ${secondAnotherValue}`
yet a better way to do it would be using the or operator like this:
return `${propsValue || anotherValue} ${secondAnotherValue}`