多场景下的es6模版字符串的高级用法

模版字符串

通过复杂结构让你了es6模版字符串的高级用法可以帮你解决平凡操作Dom,es5让人恶心的字符串拼接

• 模版字符串中嵌套模版字符串
• 模版字符串中的三元运算场景
• 在模版字符串多层级if…else多个层级嵌套遍历
• 模版字符串中的函数使用
• 模版字符串中es5字符串拼接

module.exports = {
        newHtml: function(opt) {
                let dpList = opt.dpList;
                let spell = opt.spell || null;
                let oLi = '';
                for (var i = 0; i < dpList.length; i++) {
                    let item = dpList[i];
                    let aList = `
                <div class="kb-list-box">
                <div class="icon-list">
                    ${ item.isDigest ? '<span class="dianpin-icon jin"></span>': ''}
                    ${ item.isRecommend ? '<span class="dianpin-icon tui"></span>'  : ''}
                    ${ item.isAuthen ? '<span class="dianpin-icon renzhen"></span>': '' }
                </div>
                ${ (function(){
                    if(item.user){
                    return `<div class="kb-cont-bot cf">
                            <div class="owner">
                            <a href="//i.m.yiche.com/u${item.user.uid}/"> <img src="${item.user.avatarpath.replace('{0}',120)}"></a>
                            </div>
                            <div class="owner-detail">
                                <span class="name">
                                    ${item.user.showname} 
                                    ${ (item.user.roles&&item.user.roles.caridentification&&item.user.roles.caridentification.defaultcar) ? 
                                        `<em class="logo"><img src="//image.bitautoimg.com/bt/car/default/images/logo/masterbrand/png/100/m_${ item.user.roles.caridentification.defaultcar.masterbrandid }_100.png alt="">车主</em>`
                                        : ''
                                    }
                                </span>
                                <div class="info">
                                        <span class="time"> 
                                        ${item.createTime.substring(0,10)}
                                        </span>
                                        ${(item.haveAddTopic ?(‘<em>' + item.addTopicCount  + '条追评</em>') : '')}   //字符串拼接
                                </div>
                            </div>
                        </div>`
                    }
                })()
                }
                ${ (function(){
                        if(spell){
                            return `<a class="link" href="/${spell}/koubei/${item.id}">` 
                        }else{
                            return `<a class="link" href="/sid_${item.serialId}/koubei/${item.id}">`
                        }
                    })()
                }
                ${ item.carName ? `<h5>${item.carName}</h5>` : ''}
                <div class="sec-title">
                    <ul>
                        <li>
                        ${
                            (function(){
                                if(item.rating == 10){
                                    return '<span class="star ten"></span>'
                                } else if(item.rating == 8){
                                    return '<span class="star eight"></span>'
                                } else if(item.rating == 6){
                                    return '<span class="star six"></span>'
                                }  else if(item.rating == 4){
                                    return '<span class="star four"></span>'
                                }  else {
                                    return '<span class="star two"></span>'
                                }     
                            })()
                        }
                        </li>
                        ${ item.purchasePrice ? `<li>裸车价 <em class="price">${item.purchasePrice}万元</em></li>` : ''}
                        ${ item.fuelValue ? ( item.carType == 1 ? `<li>油耗 ${item.fuelValue}L/100KM</li>` :  `<li>续航${ item.fuelValue }KM</li>`) : ''}  
                    </ul>
                </div>
                    <div class="kb-list-cont">
                        <p class="three"> 
                            ${ item.dataType == 3 ?  '<em class="tip1">语音</em>': ''}
                            ${ 
                                (function(){
                                    let cont = '';
                                    if(item.tagInfo && item.tagInfo.name){ 
                                        cont = item.tagInfo.content.replace(new RegExp(item.tagInfo.cTagString,'g'), `<em class='tip2'>${item.tagInfo.cTagString}</em>`)
                                    }else {
                                        if(item.tagInfoList && (item.tagInfoList.length>0)){
                                            _.each(item.tagInfoList,function(ee){
                                                cont += `<em class='tip2'>${ee.name}</em>${ee.content}`
                                            })
                                        }else{
                                            cont = item.content 
                                        }
                                    }
                                    return cont;
                                })()
                            }
                        </p>
                        ${ !!item.topicImages ?
                            `<div class="kb-pic-box">
                                ${ 
                                    (function(){
                                        var imgList = item.topicImages.split(","),len = imgList.length;
                                        var imgHtml = '';
                                        if(len>1){
                                            for(var i = 0; i < imgList.length; i++){
                                                var image = imgList[i];
                                                if(i<3){ 
                                                    imgHtml += `<div class="list">
                                                        <img src="${image.replace('{0}',120).replace('{1}',0)}" onerror="onerror=null;src='//image.bitautoimg.com/yc-h5/chezhan2019/default-pic.jpg'">
                                                    </div>`
                                                }
                                            }
                                            if(len>3){
                                                imgHtml += `<div class="total">${len}图</div>`
                                            }
                                        }else{
                                            imgHtml = `<div class="list one">
                                                <img src="${imgList[0].replace('{0}',240).replace('{1}',0)}" onerror="onerror=null;src='//image.bitautoimg.com/yc-h5/chezhan2019/default-pic.jpg'">
                                            </div>`
                                        }
                                        imgList = null;
                                        len = undefined;
                                        return imgHtml;
                                    })()
                                }
                            </div>` : ''
                        }
                    </div>
                </a>     
            </div>`;
            oLi = oLi + aList
        }
        return oLi;
    }
}