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(2行目)から エンド -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, "");