JavaScript で複数行の文字列を変数に代入するベストな記述方法

皆さんは、JavaScriptで変数に複数行の文章またはHTML文を代入する際にどのような記述をしていますか?
単純にコピペをするだけで、簡単に代入できる方法が無いか調べてみました。

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

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

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

テンプレートリテラルを使用する

ES2015(別名ES6)からは新たにテンプレートリテラルが使用できるようになりました。

var listLabel = 'ホーム';
var listLabel_arr = ['製品案内', '会社概要'];

function wrightListLabel() {
    return 'お問合せ';
}

var listCode = `
<ul id="menu">
<li>${listLabel}</li>
<li>${listLabel_arr[0]}</li>
<li>${listLabel_arr[1]}</li>
<li>${wrightListLabel()}</li>
</ul>
`;

「`」 はバッククォートと呼ばれていて、 Shift + @ キーで入力可能です。

また、テンプレートリテラル内で変数や関数を展開することも可能です。

変数名を上のコードの ${listLabel}のように ${} で囲むことでその変数の内容を展開することが可能です。
配列や関数も同様に${}で囲むことで使用することができます。

注意点としてはES2015対応のブラウザのみで使用できます。
基本的に新しいブラウザでは対応していますが、IE11では対応していませんので注意が必要です。

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

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

結論

基本的には「一般的な手法」を使用するのをおすすめします。
IE11を対象外とするプロジェクトの場合は「テンプレートリテラル」を使用するのが良さそうです。
デモなどの簡単に実装するためには4つ目のコピペでサックっと実装するのがおすすめです。

コメント

タイトルとURLをコピーしました