Wenn ... Else Anweisungen in Anführungszeichen

Question

Ich möchte Merge wenn else Anweisung in meinem String unten. Wenn ich es versuche, bekomme ich Uncaught SyntaxError: Unexpected token if in meiner Browser-Konsole. Wie kann ich es tun ...

 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

Versuch:

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

Sie die Zeichenfolge Variablen zuweisen und verwenden können, wie diese

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>"; 
}