Вставка инструкции if внутри шаблона шаблона ES6

У меня есть простой запрос 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>'
    )
})

})

Ответ 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>' 
: ''}'

Ответ 2

вы также можете это сделать

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

Ответ 3

Из статьи MDN о строках шаблонов:

Шаблонные литералы являются строковыми литералами, допускающими встроенные выражения.

Я бы сказал, что если вам нужна более сложная логика, чем троичное выражение в строках вашего шаблона, вы должны рассмотреть возможность рефакторинга вашего кода. Однако, поскольку это не было представлено другими ответами здесь, вы также можете использовать IIFE (выражение, вызываемое немедленно). Это может быть полезно даже в тех случаях, когда в любом случае будет достаточно троичного выражения, исключительно для ясности логики ветвления, особенно в тех случаях, когда вы встраиваете другие многострочные строки шаблона.

Позвольте мне сделать пример для вас:

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

Этот метод позволяет использовать любой синтаксис JavaScript "внутри" строки шаблона.

Ответ 4

Чтобы использовать переменную при использовании ternary operator используйте nested template litral следующим образом:

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"