JavaScriptのヒアドキュメント
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ functionのtoStringから切り出しを続けてもいいし
◆ ES6のバッククオート囲みというのもある
JavaScriptでヒアドキュメント書きたいときはどうしてますかー?
PHPだとこうなります
Linuxシェルでも
PHPと違って「<」は2つです
RubyやPerlも2つなのでPHPがちょっと特別みたいです
「<」記号複数が多いですが この記号=ヒアドキュメントというわけじゃないみたいです
PythonやScalaではダブルコーテーション3つで
Luaでは「[[」と「]]」で囲みます
C#では開始ダブルコーテーションの前に@を置くとちょっと変わってます
色々ありますが PHPなどのように自分で文字指定できるのが一番使いやすそうです
私の中では 終了文字をエスケープしなくていいように自分で選べるのがヒアドキュメントというイメージが強いです
ヒアドキュメントには内部で変数が展開されるとか エスケープ文字とか扱いが特殊だったりするので言語ごとに調べておいたほうがいいかもです
PHPではNowdocという変数展開しない シングルクオート囲みと同じ扱いのものもあります
基本的な機能はそこまでなくシンプルで拡張性高いのがよいところですしね
でもちょっと不便です
そこで裏技的な方法
JavaScriptでは関数に対してtoStringで関数の定義内容をコメントも含めて文字列化できます
コメント内ならなんでも書けるので無名関数にコメントだけ書いてそれを取り出すことでヒアドキュメントとして使うことができます
最後のコメントの内側だけ取り出す方法は 正規表現で 一番外側の /* から*/ までを取り出したり 文字数を使って固定値 substr していたり人それぞれみたいです
↑の方法は一旦配列化するので速度は優れてないですけど 1行目の 「function」 あたりの出力が変わっても大丈夫そうですし 正規表現より見やすいと思うので私はこれを使うことが多いです
エスケープは普通に反応するので \ を出力するには2つ必要です
式が計算されるので便利ですが ただ文字列を書きたい時には不便になりそうです
速度的にも 式計算機能があるので早いとは言えなそうです
PHPのNowdocのようなのもあるといいんですけど
${a} で変数aの中身がそこに埋め込まれます
{$a} では何も起きません
{} だけでも何もないです
{} の中で文字列で変数名を作っても PHPのように展開されることはないです
{} の中が式として評価されるので 代入もできますし 改行など空白文字は意味無いです
ES6ですが すでにChromeやFirefoxではもう使えるので IEなんてどうでもいいって人は使っていくのもいいかと思います
ヒアドキュメント
まずヒアドキュメントって何かですけど 改行とか書いた文字そのまま文字列として使えるやつですPHPだとこうなります
$var = <<<_heredoc_
あいうえお
改行できます
最初に決めた文字がくるまで好きな文字が書けます
!"#$%&'()@+*>?_{}[]
最初に決めた文字が行の最初に来るとおしまいです
_heredoc_;
echo <<<_EOS
$a = "abc"; と同じ扱いなのでそのまま出力もできます
EOSはエンドオブステートメントでヒアドキュメントでよく使われるみたいです
Sはストリングの略といわれるときもあるようです
たまにエンドオブファイルのEOFとか紛れてることもあります
実際 本文中に来なければなんでもいいんです
_EOS;
あいうえお
改行できます
最初に決めた文字がくるまで好きな文字が書けます
!"#$%&'()@+*>?_{}[]
最初に決めた文字が行の最初に来るとおしまいです
_heredoc_;
echo <<<_EOS
$a = "abc"; と同じ扱いなのでそのまま出力もできます
EOSはエンドオブステートメントでヒアドキュメントでよく使われるみたいです
Sはストリングの略といわれるときもあるようです
たまにエンドオブファイルのEOFとか紛れてることもあります
実際 本文中に来なければなんでもいいんです
_EOS;
Linuxシェルでも
cat <<EOS > file
a
b
c
EOS
とすることもありますa
b
c
EOS
PHPと違って「<」は2つです
RubyやPerlも2つなのでPHPがちょっと特別みたいです
「<」記号複数が多いですが この記号=ヒアドキュメントというわけじゃないみたいです
PythonやScalaではダブルコーテーション3つで
text = """3つの「"」で
ヒアドキュメントに
なります"""
こう書きますしヒアドキュメントに
なります"""
Luaでは「[[」と「]]」で囲みます
local str = [[配列カッコ2つで
ヒアドキュメントに
なります]]
ヒアドキュメントに
なります]]
C#では開始ダブルコーテーションの前に@を置くとちょっと変わってます
string str = @"C:\path\to\anyfile
パスを書くときに\を2つにしないでいいみたい
終わりはダブルコーテーション1つだけ
";
DはC#の@のかわりにqを書くようですパスを書くときに\を2つにしないでいいみたい
終わりはダブルコーテーション1つだけ
";
色々ありますが PHPなどのように自分で文字指定できるのが一番使いやすそうです
私の中では 終了文字をエスケープしなくていいように自分で選べるのがヒアドキュメントというイメージが強いです
ヒアドキュメントには内部で変数が展開されるとか エスケープ文字とか扱いが特殊だったりするので言語ごとに調べておいたほうがいいかもです
PHPではNowdocという変数展開しない シングルクオート囲みと同じ扱いのものもあります
JavaScript
裏技的な方法
JavaScriptではヒアドキュメントがサポートされていません基本的な機能はそこまでなくシンプルで拡張性高いのがよいところですしね
でもちょっと不便です
そこで裏技的な方法
var str = function(){/*
ここに好きな文字を書きます
* / ←以外好きな文字を書けます
改行もできます
*/}.toString().split("\n").slice(1,-1).join("\n")
ここに好きな文字を書きます
* / ←以外好きな文字を書けます
改行もできます
*/}.toString().split("\n").slice(1,-1).join("\n")
JavaScriptでは関数に対してtoStringで関数の定義内容をコメントも含めて文字列化できます
コメント内ならなんでも書けるので無名関数にコメントだけ書いてそれを取り出すことでヒアドキュメントとして使うことができます
最後のコメントの内側だけ取り出す方法は 正規表現で 一番外側の /* から*/ までを取り出したり 文字数を使って固定値 substr していたり人それぞれみたいです
↑の方法は一旦配列化するので速度は優れてないですけど 1行目の 「function」 あたりの出力が変わっても大丈夫そうですし 正規表現より見やすいと思うので私はこれを使うことが多いです
ES6
上の分かりやすいとは言いづらく 初めて見た人は困惑しそうなヒアドキュメントですが ES6ではバックコーテーションで言語的にサポートされるみたいですvar str = `バッククオート?
バックコーテーション?
Shift押しながら@のキーを押すと出ます
${a}とか${10*10} とやると式が計算されて文字列になります`
こういう感じですバックコーテーション?
Shift押しながら@のキーを押すと出ます
${a}とか${10*10} とやると式が計算されて文字列になります`
エスケープは普通に反応するので \ を出力するには2つ必要です
式が計算されるので便利ですが ただ文字列を書きたい時には不便になりそうです
速度的にも 式計算機能があるので早いとは言えなそうです
PHPのNowdocのようなのもあるといいんですけど
var a = "A"
var a1 = "Aone"
var b = null
console.log(`a`)
console.log("=========")
console.log(`000${a}000`)
console.log("=========")
console.log(`111{$a}111`)
console.log("=========")
console.log(`222{a}222`)
console.log("=========")
console.log(`333${"a"+1}333`)
console.log("=========")
console.log(`444${parseInt(1.1*1.1)}444`)
console.log("=========")
console.log(`555${b = 99}555`)
console.log("~~~~~~~~~")
console.log(`\n`)
console.log("=========")
console.log(`
上下に空行
`)
console.log("=========")
console.log(`\
一行だけ\
`)
console.log("=========")
console.log(`${
1
}`)
var a1 = "Aone"
var b = null
console.log(`a`)
console.log("=========")
console.log(`000${a}000`)
console.log("=========")
console.log(`111{$a}111`)
console.log("=========")
console.log(`222{a}222`)
console.log("=========")
console.log(`333${"a"+1}333`)
console.log("=========")
console.log(`444${parseInt(1.1*1.1)}444`)
console.log("=========")
console.log(`555${b = 99}555`)
console.log("~~~~~~~~~")
console.log(`\n`)
console.log("=========")
console.log(`
上下に空行
`)
console.log("=========")
console.log(`\
一行だけ\
`)
console.log("=========")
console.log(`${
1
}`)
a
=========
000A000
=========
111{$a}111
=========
222{a}222
=========
333a1333
=========
4441444
=========
55599555
~~~~~~~~~
=========
上下に空行
=========
一行だけ
=========
1
=========
000A000
=========
111{$a}111
=========
222{a}222
=========
333a1333
=========
4441444
=========
55599555
~~~~~~~~~
=========
上下に空行
=========
一行だけ
=========
1
${a} で変数aの中身がそこに埋め込まれます
{$a} では何も起きません
{} だけでも何もないです
{} の中で文字列で変数名を作っても PHPのように展開されることはないです
{} の中が式として評価されるので 代入もできますし 改行など空白文字は意味無いです
ES6ですが すでにChromeやFirefoxではもう使えるので IEなんてどうでもいいって人は使っていくのもいいかと思います