Javascriptで複数行を代入するのにベストな記述方法

Posted on カテゴリー: タグ:

皆さんは、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のコードなどをペーストするだけで使用することができるので、とっても手軽です。
ローカルでの実験やテストなどチョットした制作(公開するデータではないもの)などの時に使用すると簡単で便利かもしれません。

結論

基本的には「一般的な手法」を使用するのをおすすめします。
デモなどの簡単に実装するためには3つ目のコピペでサックっと実装するのがおすすめです。