【Javascript】ヒアドキュメントの使い方

「function」を使用した「ヘアドキュメント」

const HereDoc = function() {/*
Hello
This is Here Document Sample!!
*/};

console.log(HereDoc);


出力結果
/*
Hello
This is Here Document Sample!!
*/


上記の出力結果から、「/*」「*/」を取り除けば、
「ヒアドキュメントとして成立するので、
下記のようなコードになる。


var HereDoc = (function () {/*
<div>
<h1>ページタイトル</h1>
</div>
*/}).toString().match(/(?:\/\*(?:[\s\S]*?)\*\/)/).pop().replace(/^\/\*/, "").replace(/\*\/$/, "");


const HereDoc = function() {/*
Hello
This is Here Document Sample!!
*/};

console.log(HereDoc);
const HereDoc_Result = HereDoc.toString().match(//*([sS]*)*//).pop();
console.log(HereDoc_Result);

「script」タグを使った「ヒアドキュメント」

「script」タグ内に記述して、Webに表示されないようにしておき、
「Javascript」で、テキスト呼び込んで出力することもできる。

<script type="text/plain" id="HereDocText">
このテキストは、「script」タグ内に記述されたテキストです。
「head」タグ内に記述しておいてもOK。
</script>

const HereDoc = document.getElementById('HereDocText').textContent;
console.log(HereDoc);

ES6のJavaScriptから利用できるようになったテンプレートリテラル

const text = `
サンプルテキスト
サンプル
サンプル サンプル`;

console.log(text);
↓
サンプルテキスト
サンプル
サンプル サンプル


const HtmlDoc = `
<div>
<h1>こんにちは！</h1>
</div>
`;
document.getElementById('ID名').innerHTML = HtmlDoc;