slug: 59
title: ajax 拼接模版字符串的几种方法
date: 2021-03-22 14:54:00
updated: 2021-12-01 11:30:08
categories:
- 技術
tags:
- 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の新機能であるため、低いバージョンのブラウザでは互換性があまり良くなく、無効な文字としてエラーが発生します。
二#
そのため、もう 1 つのやや面倒な方法があります。" '' "を使用してタグと文字列を結合します。非常に手間がかかるため、注意深く確認する必要があります。うっかり記号を見落とすと、ウェブページでエラーが発生します。
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;
さまざまな状況に応じて異なる方法を使用し、いくつかの方法をマスターすることは常に有益です。さまざまな開発環境に適用できます。