皆さんは、Javascriptで変数に複数行の文章またはHTML文を代入する際にどのような記述をしていますか？

単純にコピペをするだけで、簡単に代入できたしか無いかと考え調べてみました。

 

１．一般的なな手法　「+」で結合

var listCode = '<ul id="menu"> ' +
'    <li>ホーム</li> ' +
'    <li>製品案内</li> ' +
'    <li>会社概要</li> ' +
'    <li>お問合せ</li> ' +
'</ul> ';

行の末尾に「+」をつけます。文章はシングルクォーテーションで囲み、複数の行を結合するイメージになります。この方法が一般的でよく使われます。

 

 ２．マイナーですが、こんな方法もあります。

var listCode = '<ul id="menu"> \
<li>ホーム</li> \
<li>製品案内</li> \
<li>会社概要</li> \
<li>お問合せ</li> \
</ul>';

行の末尾に半角「￥」マーク（バックスラッシュも同じ意味）をつけます。

シングルクォーテーションは、全体に囲むだけでいいので、少しだけ手間が省けます。

しかしこの方法はGoogleのガイドラインでは、禁止されています。日常的に使うのはやめておいたほうが良いと思います。

 

３．非推奨であるが複数行をコピペすることで貼り付けられる方法

var listCode = (function() {/*
<ul id="menu">
<li>ホーム</li>
<li>製品案内</li>
<li>会社概要</li>
<li>お問合せ</li>
</ul>
*/}).toString().match(/\/\*([^]*)\*\//)[1];

 コメントの中に文字列を記述します。Windowsのsafariなどで不具合があるようですが、また、この記述はコメントの本来の使用方法ではありませんので、できるだけ使わない方が良さそうです。

単純にHTMLのコードなどをペーストするだけで使用することができるので、とっても手軽です。

ローカルでの実験やテストなどチョットした制作（公開するデータではないもの）などの時に使用すると簡単で便利かもしれません。

 

結論

 基本的には１．の一般的な手法を使用するのをおすすめします。

デモなどの簡単に実装するためには３のコピペでサックっと実装するのがおすすめです。