在ES6模板文字中插入if语句

Question

我有一个简单的ajax请求返回一些数据然后插入模板文字.我想知道是否可以在模板中插入'if'语句？

基本上,如果json对象具有第5种颜色,则添加另一行代码.

  $.ajax({
url: 'http://localhost:8888/ColourCatchr%202/app/search.php'
}).done(function(results){
var res = jQuery.parseJSON(results);
console.log(res);
$.each(res,function(index,result){
  $('.palettes').append(`
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">${result.name}</h3>
      </div>
      <div class="panel-body">
        <div class="col-md-12 colors">
          <div class="color" style=background-color:#${result['color 1']}><h6>${result['color 1']}</h6></div>
          <div class="color" style=background-color:#${result['color 2']}><h6>${result['color 2']}</h6></div>
          <div class="color" style=background-color:#${result['color 3']}><h6>${result['color 3']}</h6></div>
          <div class="color" style=background-color:#${result['color 4']}><h6>${result['color 4']}</h6></div>

          ${if(result['color 5']){
            <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
            }
          }

          <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
          <p>on hover change to translucent background and black text for ecah color</p>
        </div>
      </div>
      <div class="panel-footer">
          <a class="btn btn-info btn-lg" href="update.html?id=${result.id}">Edit</a>
          <a class="btn btn-danger btn-lg">Delete</a>
      </div>
    </div>`
    )
})

})

Answer 1

您需要将逻辑移动到函数中或使用三元运算符:

`${result['color 5'] ? 'color 5 exists!' : 'color 5 does not exist!'}`

基于评论的附加示例:

`${result['color 5'] ? 
    `<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>` 
: ''}`

Answer 2

来自关于模板字符串的MDN文章：

模板文字是允许嵌入表达式的字符串文字。

因此，您还可以使用 IIFE（立即调用的函数表达式）。例如：(() => { ... })()。

不过，我认为如果您需要比模板字符串中的三元表达式更复杂的逻辑，您应该考虑重构您的代码。但是，由于其他答案尚未提出这一点，因此这是一种使用 IIFE 的方法。这在三元表达式就足够的情况下很有用，但您更喜欢以命令形式阅读分支逻辑；或者在您嵌入其他多行模板字符串的情况下。

让我为你编一个例子：

/* Note: I'm using a tagged template literal for HTML templates here, 
 * similar to the one provided by www.npmjs.com/package/lit-html. 
 */

html`
  <div class="example">
    ${(() => {
      if (result['color 5']) {
        return html`
          <div class="color-preview" style="background-color: ${result['color 5']}"></div>
          <span> Here's your color #5 </span>
        `
      } else {
        return html`<div>You don't have a 5th color</div>`
      }
    })()}
  </div>
`

由于函数体可以包含多个表达式，因此该技术允许您在模板字符串“内”使用任何 JavaScript 语法。

Answer 3

你也可以这样做

`${result['color 5'] && `Color 5 exists`}`

Answer 4

有时，如果条件是 ，您可能不想渲染任何内容false，就像您在问题中的情况一样。因此，你可以这样做：

（注意：当嵌套模板文字位于 a 内部时，也可以将模板文字嵌套在彼此内部${}）

const html = `
  <div>
    <div>
      Lots of HTML stuff
    </div>
    <div>

    ${result['color 5'] && `
      <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
    `}
  </div>
`;

这是有效的，因为与其他语言不同，在 Javascript 中，逻辑运算符 (&&和||) 不会（必然）返回trueor false。

逻辑与运算符 ( &&)：

Javascript 返回第一个假变量，如果没有找到，则返回最后一个真变量。

逻辑或运算符 ( ||)

Javascript 返回第一个 true 变量，如果没有找到，则返回最后一个 false 变量。

您可以在这里看到它的实际效果：

const html = `
  <div>
    <div>
      Lots of HTML stuff
    </div>
    <div>

    ${result['color 5'] && `
      <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
    `}
  </div>
`;

这在 JSX 中非常常用。