javascript - 如何在字符串中使用三元运算符？

Question

考虑我尝试过的以下代码片段:

<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>

我尝试了这样的方法，但是没有成功？我该怎么做？

Answer 1

当您用坟墓标记 (`) 括起字符串时，它允许在字符串连接上进行插值表达式，称为 template literal这是 ES2015 中的新增内容。您的三元运算符是表达式，因此您可以在字符串插值中使用${expr} 表示法来插值表达式。由于您已经在使用模板文字，因此没有理由进行串联，因此:

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

任何想要使用表达式的字符串连接的地方，都可以使用插值。所以代替:

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

你可以这样做:

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

因为1 + 1是一个表达式。