Firefox 34(Nightly)で String.raw が実装された件とTaggedTemplateについて

Firefox ECMAScript

TemplateLiteral の続き。

前回は、`(バッククォート) でくくることで、ヒアドキュメント的な複数行に渡る文字列の生成ができる事、${expression}で式の埋め込みができる事を書いた。

実は、func`...` という構文の追加もあり、funcを文字列の素となる値を引数に呼び出す機能もある。String.rawはそのためのメソッドだ。func`...`みたいなコードはTaggedTemplateと呼ばれている。

String.raw`Title: ${document.title}` // => "Title: hogehoge@teramako"
// === `Titlte: ${document.title}`

String.raw は、TaggedTemplateの超基本的な実装であり、ただのTemplateと同じである。

TaggedTemplateの関数に渡る引数

func`a\`${"B"}c${"D"}\`` と書いた時、func に渡される引数は以下のようになる。

  1. 各文字列部分の配列
    • ["a`", "c", "`"]
    • この配列には、rawプロパティが追加されていて、["a\`", "c", "\`"]が入っている
  2. ${"B"}の式を実行した結果
    • "B"
  3. ${"C"}の式を実行した結果
    • "C"

第一引数の配列の間に後続の引数たちが埋まっていく感じだ。

何が楽しいの？

JSで書かれたRuby実装があれば、以下のように書けるかもしれない。

ruby`
for num in 1..100 do
  if num % 15 == 0
    puts "FizzBuzz"
  elsif num % 5 == 0
    puts "Buzz"
  elseif num % 3 == 0
    puts "Fizz"
  else
    puts num
  end
end
`

HTML生成が楽になるかもしれない

HTMLElement.prototype.appendHTML = function (...args) {
  this.insertAdjacentHTML("BeforeEnd", String.raw(...args));
}

document.body.appendHTML`
<p>
  Hello, <b>${User.name}</b>.
</p>`

という感じで、個人的には面白い機能だと思ってる。あまり注目されてない気がするけど…

あ、そうそう、入力文字列をevalしたいけど、セキュリティ上関数コールはさせないみたいなフィルタリングをしている場合、func()以外にもfunc``もフィルタリングしないと思われるので気をつけてね。