web-dev-qa-db-ja.com

ES6テンプレートリテラル内にifステートメントを挿入する

データを返し、テンプレートリテラルに挿入する単純な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>`
    )
})

})
javascriptjqueryecmascript-6
15
Chris Hurst

ロジックを関数に移動するか、三項演算子を使用する必要があります。

`${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>` 
: ''}`
31
Andy Gaskell

これもできます

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

[〜＃〜] mdn [〜＃〜] テンプレート文字列に関する記事から：

テンプレートリテラルは、埋め込み式を許可する文字列リテラルです。

テンプレート文字列内の3項式よりも複雑なロジックが必要な場合は、コードのリファクタリングを検討する必要があると思います。ただし、ここでは他の回答では説明されていないため、IIFE（即時呼び出し関数expression）を使用することもできます。これは、特に他の複数行のテンプレート文字列を埋め込む場合に、分岐ロジックを明確にするためだけに、三項式で十分な場合でも役立ちます。

例を挙げましょう。

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構文を使用できます。

2
Zev Isert
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"
0
saravanakumar

使用中にvariableを使用するには ternary operator use nested template litral このように：

let var1 = 6
let var2 = 8

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