If...Else Statements within quotes

I want merge if else statement within my string bellow. When I try it I get Uncaught SyntaxError: Unexpected token if in my browser console. How can I do it...

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