Inserting if statement inside ES6 template literal

问题:

I have a simple ajax request returning some data and then inserting into a template literal. I was wondering if it it possible to insert an 'if' statement inside the template?

Essentially to add a further line of code, if the json object has a 5th color.

  $.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>`
    )
})

})

回答1:

You'll need to move your logic into a function or use the ternary operator:

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

Additional example based on comment:

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

回答2:

From the MDN article on template strings:

Template literals are string literals allowing embedded expressions.

I would argue that if you need more complicated logic than a ternary expression within your template strings, you should consider refactoring your code. However, since this hasn't been presented by the other answers here, you can also use an IIFE (immediately invoked function expression). This can be useful even in cases where a ternary expression would suffice anyway, solely to make your branching logic clear, especially in cases where you're embedding other multi-line template strings.

Let me make up an example for you:

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

This technique allows you to use any JavaScript syntax "within" your template string

回答3:

you can also do this

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

回答4:

To use a variable while usingternary operator use nested template litral like this:

let var1 = 6
let var2 = 8

console.log(`${ `${var1 > var2 ? var1 + ` (var1) `: var2 + ` (var2) `}` } is greater`)

回答5:

const heading = 'head';
const location = 'erode';
const district = 'erode';

const isSameLocationDistrict = (location === district) || false;
const storeSlug = `${heading} ${isSameLocationDistrict === true ? location : `${location } ${district}`}`;
console.log(storeSlug);

// "head erode"
// "head erode1 erode"