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是表达式。

Answer 2

你做得很好，但缺少字符串连接

<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>`;
    }
}

Answer 3

应该是：

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

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>`;
  }
}

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

4 个答案: