師匠の散歩Grandmaster Wander

JavaScriptのかけら5

表示のさせかた

JavaScriptの説明で、C言語での"Hellow World!"のようなものが抜けていました。

Document.write

<script>
document.write("Hellow World!");
</script>

表示のさせ方がわかれば、変数を使って計算したものを表示させることができます。

<script>
var x=3,y=4;
document.write("3*4=" + x*y);
</script>

このように、複数の文字列を連結するのに、+を演算子として利用できます。また、数値計算した結果を文字列で表示できるので、JavaScriptでは型変換が柔軟 であることがわかります。

ヒアドキュメント

HTMLページを出力するときのように、複数の行のテキストを、そのまま表示できると非常に便利です。

方法1

参考にしたSafariでもエラーにならないJavascriptのヒアドキュメントの書き方 の方法はこのとおりです。

  document.write("<pre class=hatmal>");
  var text = (function () {/*
ヒアドキュメントを記述します。HTMLタグをそのまま記述できます。
<ol><li>変数 = xxx
<li>計算 x = a + b
</ol>
</pre>
*/}).toString().replace(/(\n)/g, '').split('*')[1];
  document.write(text);
識別子変更1

参考サイトでは識別子に「*」を使っているのですが、これでは一般的乗算の算子である「*」が使えなくなってしまいます。対処方法として、***を使う方法がネットでよく紹介されています。

  var text = (function () {/***
ヒアドキュメントを記述します
<ol><li>変数 = xxx
<li>計算 x = a * b
</ol>
***/}).toString().replace(/(\n)/g, '').split('***')[1];
  document.write(text);

コメントなし

では、コメントの /* */ を無くすとどうなるのか試してみました。

  var text = (function () {**
ヒアドキュメントを記述します
<ol><li>変数 = xxx
<li>計算 x = a * b
</ol>
**}).toString().replace(/(\n)/g, '').split('**')[1];
  document.write(text);

**にしたら

コメントブロックを外すとヒアドキュメントにならず、textの内容を表示してくれませんでした。

コメントなんだから 識別子は**でいいだろうとすると、これまたうまくいきません。余計な「*」が表示されてしまいます。

  var text = (function () {/***
ヒアドキュメントを記述します
<ol><li>変数 = xxx
<li>計算 x = a * b
</ol>
***/}).toString().replace(/(\n)/g, '').split('**')[1];
  document.write(text);

任意の識別子

でも、この書き方にすると、任意の識別子はちゃんと動作するんです。不思議ですね。

  var text = (function () {/*HTML
ヒアドキュメントを記述します
<ol><li>変数 = xxx
<li>計算 x = a * b
</ol>
</pre>
HTML*/}).toString().replace(/(\n)/g, '').split('HTML')[1];

方法2

Javascriptでヒアドキュメントでは、次の書き方の紹介があります。

  var text = (function () {**
ヒアドキュメントを記述します
<ol><li>変数 = xxx<li>計算 x = a * y</ol>
*/}).toString().match(/(?:\/\*(?:[\s\S]*?)\*\/)/).pop().replace(/^\/\*/, "").replace(/\*\/$/, "")

Perlでのヒアドキュメント

残念なのは、JavaScriptのヒアドキュメントでは変数が使えないことです。

Perlではこんなことができました。長文のHTMLファイルを書き出すのに非常に便利でした。

 my $x = 1; 
 my @week = ("日","月","火","水","木","金","土");
 print <<"_HTML_";
<pre>
本日は $week[$x] 曜日です 
</pre>
_HTML_
本日は 月 曜日です
Perlには変数識別子があるのに対し、JavaScriptはそれが無いため、文字列なのか変数なのかの違いをつけることができないのです。

Topに戻る // 一覧に戻る
Copyright(C) Grandmaster since 2010最終更新:2016/4/21