【ES6】模板字符串

之前写法：

let _swiperDiv = '<div class="swiper-slide">
' +
        '					<video class="video" id="video1" preload="auto" controls="true" data-id="1"
' +
        '						src="http://vjs.zencdn.net/v/oceans.mp4"
' +
        '						x5-playsinline playsinline webkit-playsinline page-gesture="true" show-fullscreen-btn="false"
' +
        '						show-center-play-btn="true" show-play-btn="false" enable-play-gesture="true" crossOrigin="anonymous"
' +
        '						loop="true">你的浏览器不支持HTML5播放此视频
' +
        '					</video>
' +
        '					<div class="play">
' +
        '						<img src="images/play.png" alt="">
' +
        '					</div>
' +
        '					<div class="desc">
' +
        '						<div class="desc_name"><a href=""><img src="images/link.png" alt="">活动详情</a></div>
' +
        '						<div class="desc_title">
' +
        '							<p class="textFold">文化与承诺，卡地亚当代艺术基金会观看我们树(NOUS LES ARBRES)网络系列节目，以不同眼光发现树之美学</p>
' +
        '							<img class="fold" src="images/up.png" alt="">
' +
        '						</div>
' +
        '					</div>
' +
        '					<div class="function">
' +
        '						<div class="dianzan like" like="0">
' +
        '							<div class="xin"></div>
' +
        '							<!-- <img class="xin_active" src="images/like_active.png" alt=""> -->
' +
        '							<div class="dianzan_number">点赞</div>
' +
        '						</div>
' +
        '						<div class="xiaoxi share">
' +
        '							<img src="images/share.png" alt="">
' +
        '							<div class="dianzan_number">转发</div>
' +
        '						</div>
' +
        '						<div class="xiaoxi">
' +
        '							<img src="images/mnapp.png" alt="">
' +
        '							<div class="dianzan_number" style="margin-top: 0.05rem;">小程序</div>
' +
        '						</div>
' +
        '					</div>
' +
        '				</div>';
    $(".swiper-wrapper").append(_sliderDom);

ES6写法：

 $.each(videos, function (i, item) {
    let _sliderDom = $(
      `<div class="swiper-slide">
      <video class="video" id="video${ i + 1}" preload="auto" controls="true" data-id="${ i + 1 }"
        src="${ item.url }"
        x5-playsinline playsinline webkit-playsinline page-gesture="true" show-fullscreen-btn="false"
        show-center-play-btn="true" show-play-btn="false" enable-play-gesture="true" crossOrigin="anonymous"
        loop="true">你的浏览器不支持HTML5播放此视频
      </video>
      <div class="play">
        <img src="images/play.png" alt="">
      </div>
      <div class="desc">
        <div class="desc_name"><a href="${item.link}"><img src="images/link.png" alt="">活动详情</a></div>
        <div class="desc_title">
          <p class="textFold">${ item.title }</p>
          <img class="fold" src="images/up.png" alt="">
        </div>
      </div>
      <div class="function">
        <div class="dianzan like" like="${item.like}">
         <div class="xin"></div>
          <div class="dianzan_number">点赞</div>
        </div>
        <div class="xiaoxi share">
          <img src="images/share.png" alt="">
          <div class="dianzan_number">转发</div>
        </div>
        <div class="xiaoxi">
          <img src="images/mnapp.png" alt="">
          <div class="dianzan_number" style="margin-top: 0.05rem;">小程序</div>
        </div>
      </div>
    </div>`
    )
    $(".swiper-wrapper").append(_sliderDom);
  });

详解：https://www.jianshu.com/p/287231fbbc71