Использование оператора if в строке литерала шаблона

#javascript

Вопрос:

Я пытаюсь добавить различные операторы IF (), чтобы проверить, существует ли изображение и если одна цена больше другой, но не уверен в правильном синтаксисе при работе с литералами шаблонов.

Вот функция, которая перебирает каждый продукт и выводит название, изображение и цену, просто не знаю, как здесь использовать троичные операторы.

     if(products.length > 0) {
      products.forEach(function(product, index) {

        const productRow = `
        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-6 init">
          <div class="product-item mb-0 wow fadeIn" data-wow-offset="10" data-wow-duration="1s" data-wow-delay="500ms">
            <div class="product-thumb">
              <div class="reveal img-fluid">
                <a href="${product.url}"><img class="img-fluid" src="${product.images[0]}" /></a>
              </div>
            </div>
            <div class="product-content py-2">
              <h3><a href="${product.url}">${product.title}</a></h3>
              <p class="home-price-inline mb-0">
                <span class="js-price" data-default-price="{{ current_variant.price | money }}">${Currency.formatMoney(product.price_min)}</span>
                <s class="ml-0">${Currency.formatMoney(product.compare_at_price)}</s>
              </p>
            </div>
          </div>
        </div>`;

        productRecomendationBody.insertAdjacentHTML('afterbegin', productRow);//afterbegin is the first element directly after the parent element
      });
    }

1. См. Условный (троичный) оператор . Кроме того, вы можете заранее настроить переменные с необходимыми результатами, а затем использовать их в литерале шаблона.

2. Вы говорите, что пытаетесь добавить if , а затем говорите, что не знаете, как использовать тернарные операторы — что вы хотите?

Ответ №1:

Если вы хотите визуализировать изображение только тогда, когда оно доступно, вы можете сделать что-то подобное.

Обратитесь к этому разделу

 <a href="${product.url}">${product.images[0] ? '<img class="img-fluid" src='${product.images[0]}' />' : ""}</a>

 if (products.length > 0) {
  products.forEach(function(product, index) {

    const productRow = `
        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-6 init">
          <div class="product-item mb-0 wow fadeIn" data-wow-offset="10" data-wow-duration="1s" data-wow-delay="500ms">
            <div class="product-thumb">
              <div class="reveal img-fluid">
                <a href="${product.url}">${product.images[0] ? '<img class="img-fluid" src='${product.images[0]}' />' : ""}</a>
              </div>
            </div>
            <div class="product-content py-2">
              <h3><a href="${product.url}">${product.title}</a></h3>
              <p class="home-price-inline mb-0">
                <span class="js-price" data-default-price="{{ current_variant.price | money }}">${Currency.formatMoney(product.price_min)}</span>
                <s class="ml-0">${Currency.formatMoney(product.compare_at_price)}</s>
              </p>
            </div>
          </div>
        </div>`;

    productRecomendationBody.insertAdjacentHTML('afterbegin', productRow); //afterbegin is the first element directly after the parent element
  });
}

Ответ №2:

Я пытаюсь добавить различных if() операторов

…

просто не знаю, как использовать тернарные операторы.

С if помощью вы разделяете строку.

 var i = 2;
var row = `${i} second`; 
if (i!==1) 
  row ='s';
row  = " to go";
console.log(row)

с помощью троицы вы также можете разделить строку и сохранить ее в строке (здесь для ясности разбросано по нескольким строкам, но может быть и одна строка).

 var i = 2;
const row = `${i} second` 
              (i!==1?"s":"") 
              ` to go`;
console.log(row)

или вы можете поместить троичный в замену, используя ${}

 var i = 2;
const row = `${i} second${i!==1?"s":""} to go`;
console.log(row)