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;

異なる状況で異なる方法を使用し、いくつかの方法を習得することは決して無駄ではなく、さまざまな開発環境に適用できます。