11

ECMAScriptにおけるtagged templateを動的に生成する方法について教えて下さい。 template stringsは、一般的には、template literalsという呼称のとおり以下のコード例のようにリテラルとしてソースコード内に固定値として保持されるものですが、

var name = "user input here";
var str = `Hello, ${name}!`;

変数に格納された文字列をテンプレート文字列としてtagged template stringsとして利用したいと考えています。 この場合、evalやFunctionコンストラクタを使って文字列からコードを生成する以外にスマートな方法はないのでしょうか。

var name = "user input here";
var template = "Hello, ${name}";
var tagfunc = function(){ ... };
var str = eval( "tagfunc`" + template + "`" );

変数templateの内容が多言語化のために設定ファイルなどで指定されているといった状況を想定して下さい。 この場合、templateの内容そのものは開発者の支配下にあり実質的にevalされるコードは固定的な内容と等しいため、XSS等のセキュリティ上の心配はほぼないのですが、それでもContent-Security-Policyの導入などを考えると極力コード中のevalの使用は控えたいと思っています。

4
  • ECMAScript 6のtagged template strings i18n with tagged template strings in ECMAScript 6も使用を避けたいという事なのでしょうか?
    – user4986
    2015年1月6日 1:44
  • はい、例として多言語化という状況を書きましたが、実際にはより広範囲な場面での使用を想定しています。 i18nのように元になる文字列が少なくともコードの実行中はほぼ固定されており、その文字列を軸に他の言語を選定できるような場合には例示頂いたような方法が使えるかと思いますが、そうでない場合のより汎用的な方法が存在するのであれば知りたいと思っています。
    – hasegawa
    2015年1月6日 1:51
  • 3
    もしtemplate stringsを動的生成する関数があったとして、それはevalとどう違うんでしょうか。セキュリティ上のリスクはほとんど同じだと思いますが。
    – h2so5
    2015年1月6日 1:52
  • なるほど、もし動的に生成する機能が存在するとすると、それは本質的にevalそのものですね。
    – hasegawa
    2015年1月6日 1:56

2 件の回答 2

4

無理だと思います。テンプレートリテラルは文字列リテラルとは違います。またテンプレートリテラル内の式表現は解決後の値でしかスクリプトから参照できないようです。テンプレートを動的に生成し評価させたいのなら、ソースコードを再評価させることになりますから、 eval を使用する方向になるでしょう。

同じようなテンプレートエンジンを自前で作るにしても、名前空間の仕組み上、呼び出した関数の中では呼び出し元の変数を参照できないので、変数名を指定するようなテンプレートの作成は難しいところです。特に宣言済みのローカル変数名リストへのアクセスができないのが痛い。

それでも、シンプルな値置換のテンプレートエンジンは簡単に作成できる言語ですので、値を変数名のみではなく、eval 前提表現、または、DSL で表現できるようにしてゆけば、同じようなことができるようになるかもしれません。

// 辞書情報をもとにする、シンプルな置き換えテンプレートエンジン
function apply_tpl(tpl, dict){
  Object.keys(dict).forEach(function(k) {tpl = tpl.replace(new RegExp('\\${' + k + '}','g'), dict[k]);})
  return tpl;
}

// 使い方: 辞書
apply_tpl("Hello, ${name}", { name: "Arthur"} )
// => Hello, Arthur.

// 使い方: オブジェクトに定義されているプロパティ (プライベート変数以外)
var value1 = "Cathy"

apply_tpl("Hello, ${value1}", this)
// => "Hello, Cathy"

apply_tpl("Hello, ${value2}", this)
// => "Hello, ${value2}"
1

設定ファイルをJSで記述し、一番テンプレートリテラルそのままで使える方法を考えてみました。

~~定義~~

function MyTemp(scope_obj) {
  return key => {
    with(scope_obj) {
      return {
        HELLO : `Hello, ${name}!`,
        HELLO2: `Hello2, ${name}!`,
        HELLO3: `Hello3, ${name}!`
      }[key]
    }
  }
}

~~利用~~

var scope_obj = {
  name: "Mike"
}
var temp = new MyTemp(scope_obj)
var str = temp("HELLO")  // "Hello, Mike!"

さらにこれにProxyなどを活用すれば下記のような感じなど、気に入った表現方法で書けるようにもできるはずです。

~~利用~~

with(MyTemp){      // scope_proxy
  ......
  $name = "Mike"   // $小文字で始まる変数への代入はproxyが受け入れテンプレートで使えるようにする
  var str = $HELLO // "Hello, Mike!"
                   // $大文字で始まる変数への参照でテンプレートを解決して返す
  ......
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。