If...Else 引号内的语句

Question

我想在下面的字符串中合并 if else 语句。当我尝试它时，我在浏览器控制台中得到Uncaught SyntaxError: Unexpected token if。我该怎么做...

        for(var i=0; i<articles.length; i++) {

            var $article = "<div class='col-xs-12 col-sm-6 col-md-3 col-lg-3 fix-box-height'>" +
                "<a class='shadow-hovering' href="+"'"+articles[i].full_url+"'"+">" +
                "<div class='thumbnail color-after-hover'> " +
                "<img class='thumbnail-img' src="+"'"+ articles[i].thumbnail_url +"'"+" data-src='3' alt=''>" +
                "<div class='caption box-read-more'>"+
                    if(articles[i].title.length > 28){
                        "<h4>"+"'"+ articles[i].title.substr(0, 28) +"'..."+"</h4>"
                    } else if (articles[i].title.length > 16) {
                        "<h4>"+"'"+ articles[i].title +"'"+"</h4>"
                    } else {
                        "<h4>"+"'"+ articles[i].title +"'"+"</h4> <br>"
                    }
                    if(articles[i].subtitle.length > 37){
                        "<h4>"+"'"+ articles[i].subtitle.substr(0, 37) +"'..."+"</h4>"
                    } else if (articles[i].subtitle.length > 15) {
                        "<h4>"+"'"+ articles[i].subtitle +"'"+"</h4>"
                    } else {
                        "<h4>"+"'"+ articles[i].subtitle +"'"+"</h4> <br><br>"
                    }
                    +"<p> <span class='btn btn-primary more-box-button'>More</span> </p> " +
                    "</div>" +
                    "</div>" +
                    "</a>" +
                    "</div>";
        }

Answer 1

尝试：

    for(var i=0; i<articles.length; i++) {

        var $article = "<div class='col-xs-12 col-sm-6 col-md-3 col-lg-3 fix-box-height'>" +
            "<a class='shadow-hovering' href="+"'"+articles[i].full_url+"'"+">" +
            "<div class='thumbnail color-after-hover'> " +
            "<img class='thumbnail-img' src="+"'"+ articles[i].thumbnail_url +"'"+" data-src='3' alt=''>" +
            "<div class='caption box-read-more'>";
                if(articles[i].title.length > 28){
                    $article += "<h4>"+"'"+ articles[i].title.substr(0, 28) +"'..."+"</h4>"
                } else if (articles[i].title.length > 16) {
                    $article += "<h4>"+"'"+ articles[i].title +"'"+"</h4>"
                } else {
                    $article += "<h4>"+"'"+ articles[i].title +"'"+"</h4> <br>"
                }
                if(articles[i].subtitle.length > 37){
                    $article += "<h4>"+"'"+ articles[i].subtitle.substr(0, 37) +"'..."+"</h4>"
                } else if (articles[i].subtitle.length > 15) {
                    $article += "<h4>"+"'"+ articles[i].subtitle +"'"+"</h4>"
                } else {
                    $article += "<h4>"+"'"+ articles[i].subtitle +"'"+"</h4> <br><br>"
                }
                $article += "<p> <span class='btn btn-primary more-box-button'>More</span> </p> " +
                "</div>" +
                "</div>" +
                "</a>" +
                "</div>";
    }

Answer 2

您可以将字符串分配给变量并像这样使用

for(var i=0; i<articles.length; i++) {
  var conditional_str1, conditional_str2;
  if(articles[i].title.length > 28){
      conditional_str1 = "<h4>"+"'"+ articles[i].title.substr(0, 28) +"'..."+"</h4>"
  } else if (articles[i].title.length > 16) {
      conditional_str1 = "<h4>"+"'"+ articles[i].title +"'"+"</h4>"
  } else {
      conditional_str1 = "<h4>"+"'"+ articles[i].title +"'"+"</h4> <br>"
  }
  if(articles[i].subtitle.length > 37){
      conditional_str2 = "<h4>"+"'"+ articles[i].subtitle.substr(0, 37) +"'..."+"</h4>"
  } else if (articles[i].subtitle.length > 15) {
      conditional_str2 = "<h4>"+"'"+ articles[i].subtitle +"'"+"</h4>"
  } else {
      conditional_str2 = "<h4>"+"'"+ articles[i].subtitle +"'"+"</h4> <br><br>"
  }

  var $article = "<div class='col-xs-12 col-sm-6 col-md-3 col-lg-3 fix-box-height'>" +
                 "<a class='shadow-hovering' href="+"'"+articles[i].full_url+"'"+">" +
                 "<div class='thumbnail color-after-hover'> " +
                 "<img class='thumbnail-img' src="+"'"+ articles[i].thumbnail_url +"'"+" data-src='3' alt=''>" +
                 "<div class='caption box-read-more'>"+

                  conditional_str1 + conditional_str2

                +"<p> <span class='btn btn-primary more-box-button'>More</span> </p> " +
                 "</div>" +
                 "</div>" +
                 "</a>" +
                 "</div>";
}