JavaScript コード内で改行やスペースをそのまま文字列にする方法

JavaScript内部でHTMLを生成したりする事があり、「＋」を使って文字列を連結していましたがさすがにイライラ。ほかの言語ではヒアドキュメントあるしJavaScriptでみんなどうしてるんだろう？と調べたらあっさり見つかったのでメモとして残しておきます。

ヒアドキュメント

プログラム、スクリプトコード内で、文字列をそのままの表記する為の方法を指します。
Wikipediaではこのように記載されています。

ヒアドキュメント（別の呼び方としてヒア文字列、heredocなど）は、文字列リテラルを、シェルスクリプトやプログラミング言語のソースコード中に埋め込むための1つの方法である。
引用：「ヒアドキュメント」『フリー百科事典　ウィキペディア日本語版』。2019年1月10日 (木) 18:24　UTC、URL: http://ja.wikipedia.org

PowerShellでは以下のように記述します。@" "@ で囲むだけです。

$str = @"
あいうえお
かきくけこ
さしすせそ
"@

改行やスペースもそのまま入力したまま出力されるので、文字列連結するよりも見やすくてよいですよね。

なぜヒアドキュメントっぽく書きたいと思ったか

JavaScriptでHTMLのコードを生成する事がありました。文字列連結して恐ろしく見づらくコーディングしづらいですよね。

var str = "<h1>タイトル</h1>";
str += "<div>";
str += "本文";
str += "<a href=\"https://www.google.com/\">リンク</a>";
str += "</div>";

HTMLのタグくらいJavaScriptでもHTMLと同じように記述したいわけです。

JavaScriptで疑似的に表現する

調べたら、いろいろあったので目的も合わせて記載します。

「￥」または「バックスラッシュ」を行の最後に追加

var str = "\
あいうえお\
かきくけこ\
さしすせそ";

var strには、「あいうえおかきくけこさしすせそ」と、改行が無い状態で文字列が格納されます。これはちょっと目的と違います。
「なぜヒアドキュメントっぽく書きたいと思ったか」が緩和する事は間違いないですが、もうちょっと踏み込みたい。

「‘」で囲む（ES6対応ブラウザのみ）

「‘」バッククォートで囲むだけです。

var str = `
あいうえお
　かきくけこ
　　さしすせそ
`;

var strに、改行や全角スペースも正しく入ります。
変数を${ }で囲むことで展開も可能です。

var hoge = "アイウエオ";
var value = 12345;

var str = `
あいうえお ${hoge}
　かきくけこ
　　さしすせそ
${value}`;

strを出力すると文字列が展開されます。

あいうえお アイウエオ
　かきくけこ
　　さしすせそ
12345

これで完ぺきでは？！

ですが、ES6対応ブラウザであれば使用可能という事なのでIEでは動作しません...
　ECMAScript 6 - ECMAScript 2015
　　https://www.w3schools.com/js/js_es6.asp

IE、HTAを使用しないというのであれば問題ないと思います。

function内にコメントとして書き文字列化して抽出する

そんな手があったか～！！とびっくりしました。
functionオブジェクトを toString() すると、関数名からすべてが文字列化されます。

var str = function(){/*
あいうえお
　かきくけこ
　　さしすせそ
*/}.toString();

これではfunction(){/*と、*/}まで文字列に入ってしまうので、カットしていきます。

一行ずつの文字列配列にしてカットする

わかり易さ抜群の配列にしちゃうバージョン。

var str = function(){/*
あいうえお
　かきくけこ
　　さしすせそ
*/}.toString().split("\n").slice(1,-1).join("\n")

1. str.split("\n")
　改行コードを区切り文字として配列化。行毎の配列が完成
2. array.slice(1,-1)
　slice関数で、スタートが 1(２行目)からエンド -1（最後から１行前）までを抽出。
　ここでfunction(){/*と、*/}がなくなる
3. array.join("\n")
　配列化していたので再度区切り文字で連結

正規表現で抽出する

正規表現だと先ほどのやつよりちょっと難しく見えますよね。

var str = function(){/*
あいうえお
　かきくけこ
　　さしすせそ
*/}.toString().match(/\/\*([\s\S]*)\*\//).pop();

「match(/\/\*([\s\S]*)\*\//)」のオレンジの部分が、コメントを表す「/* */」。青色の部分が抽出したい部分です。

余談

これで文字列連結を行わずに書きやすくなりました！

var str = "<h1>タイトル</h1>";
str += "<div>";
str += "本文";
str += "<a href=\"https://www.google.com/\">リンク</a>";
str += "</div>";

var str = function(){/*
<h1>タイトル</h1>
<div>
本文
<a href="https://www.google.com/">リンク</a>
</div>
*/}.toString().split("\n").slice(1,-1).join("\n")

さらにですが、JavaScritp内でもうちょっとインデント揃えてキレイに書きたいな～という時は、タブや半角スペース連続4文字を置換するとかもありかもしれません。

HTMLタグを書いている場合はよりHTMLらしくなるのでこれはありかも。

var str = function(){/*
    <h1>タイトル</h1>
    <div>
        本文
        <a href="https://www.google.com/">リンク</a>
    </div>
*/}.toString().split("\n").slice(1,-1).join("\n").replace(/ {4}/g, "")

タブか半角スペース4個を判定するのであればこんな感じ。

.replace(/\t | {4}/g, "");