WebDesign Dackel

JSで長い文字列を生成する方法3種

JSで長い文字列を生成する方法3種

Hatena0
Google+0
Pocket0
Feedly0

JSを使ったサイトを構築する際、jQueryなどで動的にHTMLを追加したり、コンテンツを生成したりすることがあるかと思います。
サーバから値を取得して描画したり、モーダルのコンテンツ部分のHTMLを作ったり。
そんなHTMLを文字列から作る時、皆さんはどのようにしているでしょうか? JSで長い文字列を作るのは意外と手間ですよね。

いくつか方法があるかと思いますが、今回は僕が知っている方法を3パターンご紹介したいと思います。

生成する文字列

これから紹介する全てのパターンで下記のHTML文字列を生成することを目的としたいと思います。

<div>
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <p>サンプル</p>
</div>

パターン1 単純に文字列結合

var str = '';
str += '<div>';
    str += '<h1>見出し1</h1>';
    str += '<h2>見出し2</h2>';
    str += '<p>サンプル</p>';
str += '</div>';

これが一番オーソドックスかなぁ~と思いますが、少しタイポ数が増えるのとstr +=の部分のせいで若干見辛いです!

パターン2 配列で結合しておいて、JOINする

var str = [
    '<div>',
        '<h1>見出し1</h1>',
        '<h2>見出し2</h2>',
        '<p>サンプル</p>',
    '</div>'
].join("");

個人的に一番よく使っている方法です。最後の,を除けば、結構シンプルに書けるので気に入っています。
join("\n")の様に、結合する際に改行コードを入れれば、各行に改行が入るためconsolealertで確認したい時に構造が見やすいです。

パターン3 ヒアドキュメントで記述

var str = (function(){/*
<div>
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <p>サンプル</p>
</div>
*/}).toString().replace(/(n)/g, '').split('*')[1];

参考サイト:SafariでもエラーにならないJavascriptのヒアドキュメントの書き方

この方法は一度も使ったことが無いのですが、これは中々変わり種ですね! 全体が見やすくて、構造の変更や修正などが簡単そうです。機会があれば使ってみたいです。

ちなみにPHPだと

PHPであれば、ヒアドキュメントを使って簡単に作ることが出来ます。

$str = <<<EOT
<div>
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <p>サンプル</p>
</div>
EOT;

他にもこんな方法があるよ、っていうのがあればご教授頂ければと思います。