How can I use a operator ternary in a string?

Question

Consider the following snippet I tried:

<script>
    for (var key in photoList) {
        if(key == photoList[key].id) {
            var res =  `<li id="thumbnail-`+key+`">
                            <div class="thumbnail `+(product.photo == photoList[key].id)+` ? 'thumbnail-main' : ''">
                                ...
                            </div>
                        </li>`;
        }
    }
</script>

I try like that, but it did not work? How can I do it?

Possible duplicate of [How to write this ternary operator with jquery?](https://stackoverflow.com/questions/6595585/how-to-write-this-ternary-operator-with-jquery) — Alex Mac, Jun 16 '17 at 12:28
https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript — , Jun 16 '17 at 12:28
You're using the grave accent (`), use simply apostrophe (') — Alessandro, Jun 16 '17 at 12:29

Andrew Li · Accepted Answer · 2017-06-16T12:42:29.453

When you enclose a string with grave marks (`), it allows for interpolated expression over string concatenation, called a template literal which is new in ES2015. Your ternary operator is an expression, so you can use ${expr} notation in string interpolation to interpolate an expression. Since you're already using template literals, there's no reason to do concatenation, thus:

var res = `<li id="thumbnail-${key}">
             <div class="thumbnail ${product.photo == photoList[key].id ? 'thumbnail-main' : ''}>
               ...
             </div>
           </li>`;

Anywhere you want to use string concatenation of an expression, you can just use interpolation. So instead of:

'1 + 1 = ' + (1 + 1)

You can do:

`1 + 1 = ${1 + 1}`

Because 1 + 1 is an expression.

Seems you can help me. Look at this : https://stackoverflow.com/questions/44665670/how-can-i-solve-uncaught-syntaxerror-unexpected-identifier-in-string-javascript — samuel toh, Jun 21 '17 at 02:49

score 0 · Answer 2 · answered Jun 16 '17 at 12:28

You were doing it ok, but missing the string concatenation

<script>
for (var key in photoList) {
    if(key == photoList[key].id) {
        var res =  `<li id="thumbnail-`+key+`">
                        <div class="thumbnail `+(product.photo == photoList[key].id ? 'thumbnail-main' : '') + `">
                            ...
                        </div>
                    </li>`;
    }
}

score 0 · Answer 3 · answered Jun 16 '17 at 12:29

0

It should be:

<script>
    for (var key in photoList) {
        if(key == photoList[key].id) {
            var res =  '<li id="thumbnail-'+key+'"><div class="thumbnail ' + ((product.photo == photoList[key].id)+ ? 'thumbnail-main' : '') + ">
                                ...
                            </div>
                        </li>';
        }
    }
</script>

answered Jun 16 '17 at 12:29

teo van kot

12,350
10
38
70

Seems you can help me. Look at this : https://stackoverflow.com/questions/44665670/how-can-i-solve-uncaught-syntaxerror-unexpected-identifier-in-string-javascript – samuel toh Jun 21 '17 at 02:49

score 0 · Answer 4 · answered Jun 16 '17 at 12:30

for (var key in photoList) {
  if (key === photoList[key].id) {
    var res =  `
      <li id="thumbnail-${key}">
      <div class="thumbnail ${
        (product.photo === photoList[key].id) ? 'thumbnail-main' : ''
      }">
      ...
      </div>
      </li>`;
  }
}

How can I use a operator ternary in a string?

4 Answers4