Как создать оператор if внутри встроенного HTML в JavaScript для отображения CSS класса

Question

Как отобразить один из двух классов, основываясь на том, есть ли данные в массиве js.

например, если есть responseData.title, показать класс серый, иначе класс белый

Я пытаюсь это сейчас:

let resultHTML = '<article class="item">\
                    <div class="post-main">\
                        <header class="clear">\
                            <a href="' + responseData.url + '"</a>\
                            <span class="post-date">just now</span>\
                        </header>\
                        'if (responseData.title) {
                            '<section class="grey">'
                        } else {
                            '<section class="white">'
                        }'\
                            ' + articleImage + '\
                            <h3>' + responseData.title + '</h3>\
                            <div class="post-about">' + responseData.about + '</div>\
                        </section>\
                    </div>\
                </article>';

Answer 1

Вы можете использовать троичный оператор . В вашем случае это было бы так:

let resultHTML = '<article class="item">\
                    <div class="post-main">\
                        <header class="clear">\
                            <a href="' + responseData.url + '"</a>\
                            <span class="post-date">just now</span>\
                        </header>\
                        ' + responseData.title ?
                            '<section class="grey">'
                        :
                            '<section class="white">'
                        + '\
                            ' + articleImage + '\
                            <h3>' + responseData.title + '</h3>\
                            <div class="post-about">' + responseData.about + '</div>\
                        </section>\
                    </div>\
                </article>';

Answer 2

Я предпочитаю использовать Шаблонные литералы (строки шаблона) с Условный (троичный) оператор , который более чище.

Демо:

let responseData = {title:'abc'}
let articleImage = 'test';
let resultHTML = `<article class="item">
    <div class="post-main">
        <header class="clear">
          <a href=responseData.url </a>
          <span class="post-date">just now</span>
        </header>
        ${
           responseData.title ?
          '<section class="grey">'
          : '<section class="white">'
         }

        ${articleImage}
        <h3> ${responseData.title} </h3>
        <div class="post-about"> ${responseData.about} </div>
        </section>
    </div>
</article>`;
console.log(resultHTML);