js模板字符转使用-循环、判断、自定义函数等用法实例

js的模板字符串很强大，这里也是简单使用了一下，目的是将我的文章评论做一个异步获取，但是我项目又没有使用vue这些前端框架，只能使用这个方法了。

function getComments(id) {
            var url = '/Comment/getComments';
            var data = {
                contentid: id
            }
            $.post(url, data, function (e) {
                let str = `
<div class="mseeageBox mcr-col-md12 mcr-col-xs12 box-shadow mgt20">
    <h5>评论(${e.total})</h5>
    <hr>
    <div class="comment">
        ${e.data.map((item) => {
                    return `
            <div class="item" id="articleComment${item.id}">
                <div class="left">
                    <a target="_blank" href="{$v.homepage}">
                        <img src="${item.headimgurl}">
                    </a>
                </div>
                <div class="right">
                    <div class="ctitle">
                        <a class="nickname" href="">${item.nickname}</a>
                    </div>
                    <div class="comment-content">
                        ${item.content}
                    </div>
                    <div class="comment-time">
                         ${item.browser}-
                         ${item.os}-
                         ${item.ip_detail}
                    </div>
                </div>
            </div>
                    ${getReplyHtml(item)}
                `;
                }).join("")}
    </div>
</div>`
                console.log('str', str)
                $('.mseeageBox').parent().append(str)
            })
        }
        function getReplyHtml(item){
            let str = '';
            if(item.reply){
                str += `
                    <div class="item reply">
                    <div class="left">
                        <a target="_blank" href="${item.reply.homepage}">
                            <img src="/data/upload/20210708/9f2d8f64301ae0afa79b386278452986.jpg" >
                        </a>
                    </div>
                    <div class="right">
                        <div class="ctitle">
                            <a class="nickname" href="">米醋儿</a>
                        </div>
                        <div class="pd15">
                            ${item.reply.content}
                        </div>
                        <div class="comment-time">
                            ${item.reply.create_time}
                        </div>
                    </div>
                </div>
            `
            }
            return str;
        }

13行是循环

36行是自定义函数