ajax拼接模版字符串的几种方法

子舒

发布于 2022-06-09 14:08:05

3880

发布于 2022-06-09 14:08:05

文章被收录于专栏：子舒的个人博客

起因是因为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;

在不同的情况下使用不同的方法，多掌握几种方法总是不亏的，能适用与各种开发环境。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021 年 03 月，如有侵权请联系 cloudcommunity@tencent.com 删除

ecmascript