ajax拼接模板字符串的幾種方法

起因是因為 IE10 不兼容 es6，所以引發了一系列的問題。

一#

使用ajax拼接字符串有很多方法，最簡單的莫過於使用 es6 的語法中的關鍵符號，

str += 
`<li class="wrap-item">
    <div class="pic-wrap">
        <div class="pic">
            <div class="pic-son">
                <a href=" ` + item.link + `" target="_blank"><img src=" ` + item.pic+ `" alt="縮略圖"></a>
            </div>
        </div>

        <div class="pic-main">
            <div class="pic-title">
                <span>編號：</span>
                <span> ` + item.title + ` </span>
            </div>
            <div class="pic-guide"> ` 
                + item.guide +
            ` </div>
            <div class="pic-link" id="picLink">
                <a href=" ` + item.link + ` " target="_blank">預覽</a>
            </div>
        </div>
    </div>
</li> 
`

可以很快的把模版字符串寫好，但是正因為它是es6的新特性，因此對於低版本的瀏覽器兼容性不太好，報錯無效字符。

二#

因此還有一種較為麻煩的寫法" '' " ，使用單引號和雙引號將標籤和字符串連接起來。因為太過繁瑣，所以需要特別仔細的查看，一不小心漏個符號，就會導致網頁報錯。

p = "<li class='wrap-item'>"
    +"<div class='pic-wrap'>"
        +"<div class='pic'>"
            +"<div class='pic-son-wrap'>"
                +"<div class='pic-son'>"
                    +"<a href='"+item.link+"'>"
                        +"<img src='"+item.pic+"' alt='縮略圖'>"
                    +"</a>"
                +"</div>"
            +"</div>"
            +"<div class='pic-main'>"
                +"<div class='pic-title'>"
                    +"<span>"+"編號："+"</span>"+"<span>"+item.title+"</span>"
                +"</div>"
                +"<div class='pic-guide'>"
                    +item.guide
                +"</div>"
                +"<div class='pic-link' id='picLink'>"
                    +"<a href='"+item.link+"'>"
                        +"預覽"
                    +"</a>"
                +"</div>"
            +"</div>"
        +"</div>"
        +"</div>"
    +"</li>"
str += p;

在不同的情況下使用不同的方法，多掌握幾種方法總是不虧的，能適用於各種開發環境。