document.write() 複数行の記述方法いろいろ

Javascriptのdocument.writeを使ってたくさんの内容を出力したいことってあると思います。複数行出力するときはいろいろな書き方ができます。

以下のように都度記述する方法もあれば…

document.write('<div id="exampleBlock">');
document.write('<h2>example</h2>');
document.write('<p>foo bar</p>');
document.write('</div>');

以下のようにwith文を使って親オブジェクトの名前を省略して記述する方法もあります。

with(document){
write('<div id="exampleBlock">');
write('<h2>example</h2>');
write('<p>foo bar</p>');
write('</div>');
}

実にさまざまなフォーマットで記述可能なのですが、僕はこんな書き方を好んでよく使っています。

document.write(
'<div id="exampleBlock">',
'<h2>example</h2>',
'<p>foo bar</p>',
'</div>'
);

document.write関数のなかに改行区切りで複数指定してあげると、かなりスマートに記述できるのではと思います。3〜4行の少量でしたら上記二つの方法でも十分ですが、大量でかつ頻繁に更新するとなると、こうしたほうが圧倒的に楽であります。最後の行だけカンマを入れないように注意が必要です。

複数行の文字列の代入もこれを応用して、以下が楽だと個人的に感じてます。

data =
'<div id="exampleBlock">' +
'<h2>example</h2>' +
'<p>foo bar</p>' +
'</div>';

ほかに面白い記述の仕方があれば教えてください!

(2009/8/20追記)コメント欄にて面白い記述方法を教えていただきました!
\マークを使用すると改行しても1文として解釈するとのことです!(Windowsでは「へ」の右のキー、Macではoptionキーを押しながら「へ」の右のキーを押して出します)ダブルクォーテーションで囲んでも、エスケープシーケンスを使用しても、問題なく出力されました。1文字だけなのでミスも少なくなりそうです。これはぜひ使ってみたいです!

document.write('\
<div id="exampleBlock">\
<h2>example</h2>\
<p>foo bar</p>\
</div>\
');

4 Replies to “document.write() 複数行の記述方法いろいろ”

  1. 1番目や2番目だとdocument.writeを何度も実行しなくちゃいけないので、処理が遅いですよねー。
    やっぱり1回で出力したほうがいい。
    僕は一旦変数に文字列入れておいて、出力させることが多いです。デバッグしやすいし。

  2. JavaScript中で\を使うと改行しても1文とみなしてくれるので、こういう書き方もできます。
    タイプ量が若干減るぐらいしかメリットがありませんが・・・

    document.write(‘\
    \
    example\
    foo bar\
    \
    ‘);

  3. >たださん
    関数を何度も実行させるのは気持ちがわるいと思っていましたがやっぱり処理が遅いのですね。一度に出力できるのが一番ですね!

    >abさん
    おお〜\マークだけで1文と解釈してくれるのですね!いちいちクォーテーションとコンマで囲むよりもぜんぜん簡単で衝撃です!
    ダブルクォーテーションで囲んでも、エスケープシーケンスを使用しても、問題なく出力されますし、1文字だけなのでミスも少なくなりそうです。これはぜひ使ってみたいですねー。
    情報ありがとうございます!

  4. 長年JavaScriptやってるけど、
    行末の\は初めて知ったわ…。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です