変数に改行や複数行の文字列を記述する方法[JavaScript]

0

jQueryのappendを使用する場合など、結構長めのhtml記述を変数に代入したい時があります。
JavaScriptで変数に代入する際に、改行を含む文字列はどのように記述するかを解説します。

「`」バッククォートを使用する

単純に改行を含んだ文字列を「`」バッククォートで囲む方法です。
サンプル

var userInfo = `
    <div class="user">
        <div class="close">✕</div>
        <div class="message">Sample JavaScript</div>
        <a href="#" class="btn-basic">OK</a>
    </div>
`;

もちろん、変数内で文字列と変数を結合することも可能です。

var btnClass = "btn-basic";
var userInfo = `
    <div class="user">
        <div class="close">✕</div>
        <div class="message">Sample JavaScript</div>
        <a href="#" class="` + btnClass + `">OK</a>
    </div>
`;

「`」バッククォートは通常「SHIFT + @」で入力可能です。バッククォートで囲むだけなので簡単ですね！

改行部分に「\」を記述する

もう一つは、改行部分に「\」バックスラッシュを記述します。

var userInfo = '\
    <div class="user">\
        <div class="close">✕</div>\
        <div class="message">Sample JavaScript</div>\
        <a href="#" class="btn-basic">OK</a>\
    </div>\
';

 
上記のように改行が発生している部分に「\」を記述するだけですが、「`」バッククォートに比べると手間が増えますね。

長いhtmlをjQueryでappendしなければならない場合などに記述がわかりやすくなります。

JavaScriptおすすめの書籍

JavaScriptはonlineの情報も多く、Google検索が便利なので書籍を読む必要はないかもしれません。
ただ、これから学ぶ方は一冊簡単な本を読んだ方が理解が深まると思います。逆引き本とかも良書はあるのですが、Google検索した方がコピー＆ペーストできるので便利なのでいらないかな。

確かな力が身につくJavaScript「超」入門 第2版
これからはじめる方向け

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
超おすすめ！Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。

jQueryおすすめの書籍

jQueryの書籍は、古いものが多いです。ただ、jQuery自体は今も進化しています。
公式を見るのが一番良いかもしれません。
jQuery公式

jQuery最高の教科書
基本から応用まで。