Several methods for concatenating template strings with ajax

slug: 59
title: Several Methods for Concatenating Template Strings with Ajax
date: 2021-03-22 14:54:00
updated: 2021-12-01 11:30:08
categories:
- Technology
tags:
- ajax

> The reason is that IE10 is not compatible with ES6, which has caused a series of problems.

One#

There are many methods to concatenate strings using ajax, and the simplest one is to use the key symbol in ES6 syntax.

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="Thumbnail"></a>
            </div>
        </div>

        <div class="pic-main">
            <div class="pic-title">
                <span>Number:</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">Preview</a>
            </div>
        </div>
    </div>
</li> 
`

You can quickly write the template string, but because it is a new feature of ES6, it is not very compatible with older versions of browsers and may result in an error of invalid characters.

Two#

Therefore, there is another more cumbersome way to write " '' " by using single quotes and double quotes to concatenate tags and strings. Because it is too cumbersome, you need to carefully check it. If you accidentally miss a symbol, it will cause a webpage error.

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='Thumbnail'>"
                    +"</a>"
                +"</div>"
            +"</div>"
            +"<div class='pic-main'>"
                +"<div class='pic-title'>"
                    +"<span>"+"Number:"+"</span>"+"<span>"+item.title+"</span>"
                +"</div>"
                +"<div class='pic-guide'>"
                    +item.guide
                +"</div>"
                +"<div class='pic-link' id='picLink'>"
                    +"<a href='"+item.link+"'>"
                        +"Preview"
                    +"</a>"
                +"</div>"
            +"</div>"
        +"</div>"
        +"</div>"
    +"</li>"
str += p;

In different situations, use different methods. It's always good to master several methods that can be applied to various development environments.