JavaScriptでヒアドキュメントする方法！大量の文字列を縦に書く！

サクウェブＴＶはコチラ↓↓↓

プログラミング上でメール本文を生成したり、大量のCSSを一気に書いたり、

<!DOCTYPE>からHTMLを生成して一気に

document.write()でページを書き出したりと、時には大量の文字列を書きたい場合があると思います。

そのようなときPHPでは

$str = <<<STR
    今日は
    お昼に
    ラーメンを
    食べました。
    餃子も
    ３皿
    食べました。
STR;

というような書き方ができ、非常に便利です。

これをヒアドキュメントと呼びます。

しかし、JavaScriptにはこのような書き方が用意されていません。

ですので、通常

var str = "今日は";
str += "お昼に";
str += "ラーメンを";
str += "食べました。";
str += "餃子も";
str += "３皿";
str += "食べました。";

というように非常に面倒くさい書き方をしているか、一行でザーっと書いているかも知れません。

ただ、横長のソースは読みづらいため１行で書こうとするのはよろしくありません。

そこで、PHPのヒアドキュメント的書き方がやはり必要になります。

では以下のようにしてみましょう。

var str = "
   今日は
   お昼に
   ラーメンを
   食べました。
   餃子も
   ３皿
   食べました。
";

はい。これではうんともすんとも動きません（汗）

JavaScriptでは文字列の途中で改行してはいけないからです。

そこで、改行（改行文字）を「\」で全てエスケープしてあげるわけです。

var str = "\
   今日は\
   お昼に\
   ラーメンを\
   食べました。\
   餃子も\
   ３皿\
   食べました。\
";

はい。これで動きます。

それぞれの行の最後に改行文字「\n\r」がありますから

それを全て「\」でエスケープして無効化しました。

確かに、行の最後に必ず「\」をつけるのは面倒ですが、慣れれば結構使いやすい方法だと思います。