Converti una stringa in una stringa modello

È possibile creare una stringa modello come una normale stringa

let a="b:${b}";

e quindi convertirlo in una stringa di modello

let b=10;
console.log(a.template());//b:10

colpo eval, new Functioned altri mezzi di generazione di codice dinamico?

Poiché la stringa del modello deve ottenere un riferimento bdinamico alla variabile (in runtime), la risposta è: NO, è impossibile fare a meno della generazione dinamica del codice.

Ma con evalè abbastanza semplice:

let tpl = eval('`'+a+'`');

Nel mio progetto ho creato qualcosa del genere con ES6:

String.prototype.interpolate = function(params) {
  const names = Object.keys(params);
  const vals = Object.values(params);
  return new Function(...names, `return \`${this}\`;`)(...vals);
}

const template = 'Example text: ${text}';
const result = template.interpolate({
  text: 'Foo Boo'
});
console.log(result);

AGGIORNAMENTO Ho rimosso la dipendenza da lodash, ES6 ha metodi equivalenti per ottenere chiavi e valori.

Cosa stai chiedendo qui:

//non working code quoted from the question
let b=10;
console.log(a.template());//b:10

è esattamente equivalente (in termini di potenza e, er, sicurezza) a eval: la capacità di prendere una stringa contenente codice ed eseguirlo; e anche la possibilità per il codice eseguito di vedere le variabili locali nell'ambiente del chiamante.

In JS non è possibile che una funzione veda le variabili locali nel suo chiamante, a meno che tale funzione non lo sia eval(). Neanche ci Function()riesco.

Quando senti qualcosa chiamato "stringhe di modelli" in arrivo su JavaScript, è naturale supporre che sia una libreria di modelli integrata, come Moustache. Non lo è. È principalmente solo interpolazione di stringhe e stringhe multilinea per JS. Penso che questo sarà un malinteso comune per un po ', però. :(

No, non esiste un modo per farlo senza la generazione di codice dinamico.

Tuttavia, ho creato una funzione che trasformerà una stringa normale in una funzione che può essere fornita con una mappa di valori, usando internamente stringhe di template.

Genera sintesi stringa modello

/**
 * Produces a function which uses template strings to do simple interpolation from objects.
 * 
 * Usage:
 *    var makeMeKing = generateTemplateString('${name} is now the king of ${country}!');
 * 
 *    console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'}));
 *    // Logs 'Bryan is now the king of Scotland!'
 */
var generateTemplateString = (function(){
    var cache = {};

    function generateTemplate(template){
        var fn = cache[template];

        if (!fn){
            // Replace ${expressions} (etc) with ${map.expressions}.

            var sanitized = template
                .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function(_, match){
                    return `\$\{map.${match.trim()}\}`;
                    })
                // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
                .replace(/(\$\{(?!map\.)[^}]+\})/g, '');

            fn = Function('map', `return \`${sanitized}\``);
        }

        return fn;
    }

    return generateTemplate;
})();

Uso:

var kingMaker = generateTemplateString('${name} is king!');

console.log(kingMaker({name: 'Bryan'}));
// Logs 'Bryan is king!' to the console.

Spero che questo aiuti qualcuno. Se riscontri un problema con il codice, si prega di essere così gentile da aggiornare Gist.

TLDR: https://jsfiddle.net/w3jx07vt/

Tutti sembrano preoccupati dell'accesso alle variabili, perché non passarle e basta? Sono sicuro che non sarà troppo difficile ottenere il contesto variabile nel chiamante e trasmetterlo. Usa questo https://stackoverflow.com/a/6394168/6563504 per ottenere oggetti di scena da obj. Non posso testare per te adesso, ma dovrebbe funzionare.

function renderString(str,obj){
    return str.replace(/\$\{(.+?)\}/g,(match,p1)=>{return index(obj,p1)})
}

Provato. Ecco il codice completo.

function index(obj,is,value) {
    if (typeof is == 'string')
        is=is.split('.');
    if (is.length==1 && value!==undefined)
        return obj[is[0]] = value;
    else if (is.length==0)
        return obj;
    else
        return index(obj[is[0]],is.slice(1), value);
}

function renderString(str,obj){
    return str.replace(/\$\{.+?\}/g,(match)=>{return index(obj,match)})
}

renderString('abc${a}asdas',{a:23,b:44}) //abc23asdas
renderString('abc${a.c}asdas',{a:{c:22,d:55},b:44}) //abc22asdas

Il problema qui è avere una funzione che ha accesso alle variabili del suo chiamante. Questo è il motivo per cui vediamo l' evalutilizzo diretto per l'elaborazione dei modelli. Una possibile soluzione sarebbe quella di generare una funzione prendendo parametri formali nominati dalle proprietà di un dizionario e chiamandola con i valori corrispondenti nello stesso ordine. Un modo alternativo sarebbe quello di avere qualcosa di semplice come questo:

var name = "John Smith";
var message = "Hello, my name is ${name}";
console.log(new Function('return `' + message + '`;')());

E per chiunque utilizzi il compilatore Babel dobbiamo creare una chiusura che ricordi l'ambiente in cui è stata creata:

console.log(new Function('name', 'return `' + message + '`;')(name));

Ci sono molte buone soluzioni pubblicate qui, ma nessuna ancora utilizza il metodo String.raw ES6 . Ecco la mia contriubution. Presenta un'importante limitazione in quanto accetterà solo le proprietà da un oggetto passato, il che significa che nessuna esecuzione di codice nel modello funzionerà.

function parseStringTemplate(str, obj) {
    let parts = str.split(/\$\{(?!\d)[\wæøåÆØÅ]*\}/);
    let args = str.match(/[^{\}]+(?=})/g) || [];
    let parameters = args.map(argument => obj[argument] || (obj[argument] === undefined ? "" : obj[argument]));
    return String.raw({ raw: parts }, ...parameters);
}

let template = "Hello, ${name}! Are you ${age} years old?";
let values = { name: "John Doe", age: 18 };

parseStringTemplate(template, values);
// output: Hello, John Doe! Are you 18 years old?

1. Dividi la stringa in parti testuali senza argomento. Vedi regex .
   parts: ["Hello, ", "! Are you ", " years old?"]
2. Dividi la stringa in nomi di proprietà. Matrice vuota se la corrispondenza fallisce.
   args: ["name", "age"]
3. Parametri della mappa in objbase al nome della proprietà. La soluzione è limitata dalla mappatura superficiale a un livello. I valori indefiniti vengono sostituiti con una stringa vuota, ma vengono accettati altri valori falsi.
   parameters: ["John Doe", 18]
4. Utilizzare String.raw(...)e restituire il risultato.

Simile alla risposta di Daniel (e alla sostanza di s.meijer ) ma più leggibile:

const regex = /\${[^{]+}/g;

export default function interpolate(template, variables, fallback) {
    return template.replace(regex, (match) => {
        const path = match.slice(2, -1).trim();
        return getObjPath(path, variables, fallback);
    });
}

//get the specified property or nested property of an object
function getObjPath(path, obj, fallback = '') {
    return path.split('.').reduce((res, key) => res[key] || fallback, obj);
}

Nota: questo migliora leggermente l'originale di s.meijer, poiché non corrisponderà a cose come ${foo{bar}(la regex consente solo caratteri di parentesi graffe non ricci all'interno ${e }).

AGGIORNAMENTO: Mi è stato chiesto un esempio usando questo, quindi eccoti qui:

const replacements = {
    name: 'Bob',
    age: 37
}

interpolate('My name is ${name}, and I am ${age}.', replacements)

È possibile utilizzare il prototipo di stringa, ad esempio

String.prototype.toTemplate=function(){
    return eval('`'+this+'`');
}
//...
var a="b:${b}";
var b=10;
console.log(a.toTemplate());//b:10

Ma la risposta alla domanda originale non è possibile.

Mi è piaciuta la risposta di s.meijer e ho scritto la mia versione basata sulla sua:

function parseTemplate(template, map, fallback) {
    return template.replace(/\$\{[^}]+\}/g, (match) => 
        match
            .slice(2, -1)
            .trim()
            .split(".")
            .reduce(
                (searchObject, key) => searchObject[key] || fallback || match,
                map
            )
    );
}

Ho richiesto questo metodo con supporto per Internet Explorer. Si è scoperto che le zecche posteriori non sono supportate nemmeno da IE11. Anche; usare evalo è equivalente Functionnon sembra giusto.

Per quello che nota; Uso anche i backtick, ma questi vengono rimossi da compilatori come Babel. I metodi suggeriti da altri dipendono da essi in fase di esecuzione. Come detto prima; questo è un problema in IE11 e inferiore.

Quindi questo è quello che mi è venuto in mente:

function get(path, obj, fb = `$\{${path}}`) {
  return path.split('.').reduce((res, key) => res[key] || fb, obj);
}

function parseTpl(template, map, fallback) {
  return template.replace(/\$\{.+?}/g, (match) => {
    const path = match.substr(2, match.length - 3).trim();
    return get(path, map, fallback);
  });
}

Esempio di output:

const data = { person: { name: 'John', age: 18 } };

parseTpl('Hi ${person.name} (${person.age})', data);
// output: Hi John (18)

parseTpl('Hello ${person.name} from ${person.city}', data);
// output: Hello John from ${person.city}

parseTpl('Hello ${person.name} from ${person.city}', data, '-');
// output: Hello John from -

Al momento non posso commentare le risposte esistenti, quindi non sono in grado di commentare direttamente l'eccellente risposta di Bryan Raynor. Pertanto, questa risposta aggiornerà la sua risposta con una leggera correzione.

In breve, la sua funzione non riesce effettivamente a memorizzare nella cache la funzione creata, quindi verrà sempre ricreata, indipendentemente dal fatto che abbia visto prima il modello. Ecco il codice corretto:

    /**
     * Produces a function which uses template strings to do simple interpolation from objects.
     * 
     * Usage:
     *    var makeMeKing = generateTemplateString('${name} is now the king of ${country}!');
     * 
     *    console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'}));
     *    // Logs 'Bryan is now the king of Scotland!'
     */
    var generateTemplateString = (function(){
        var cache = {};

        function generateTemplate(template){
            var fn = cache[template];

            if (!fn){
                // Replace ${expressions} (etc) with ${map.expressions}.

                var sanitized = template
                    .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function(_, match){
                        return `\$\{map.${match.trim()}\}`;
                    })
                    // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
                    .replace(/(\$\{(?!map\.)[^}]+\})/g, '');

                fn = cache[template] = Function('map', `return \`${sanitized}\``);
            }

            return fn;
        };

        return generateTemplate;
    })();

@Mateusz Moska, la soluzione funziona alla grande, ma quando l'ho usata in React Native (modalità build), genera un errore: carattere non valido '' ' , sebbene funzioni quando lo eseguo in modalità debug.

Quindi ho scritto la mia soluzione usando regex.

String.prototype.interpolate = function(params) {
  let template = this
  for (let key in params) {
    template = template.replace(new RegExp('\\$\\{' + key + '\\}', 'g'), params[key])
  }
  return template
}

const template = 'Example text: ${text}',
  result = template.interpolate({
    text: 'Foo Boo'
  })

console.log(result)

Demo: https://es6console.com/j31pqx1p/

NOTA: Dal momento che non conosco la causa principale di un problema, ho sollevato un ticket nel repository reagente nativo, https://github.com/facebook/react-native/issues/14107 , in modo che una volta che siano in grado di risolvimi / guidami sullo stesso :)

Ancora dinamico ma sembra più controllato del semplice utilizzo di un nudo nudo:

const vm = require('vm')
const moment = require('moment')


let template = '### ${context.hours_worked[0].value} \n Hours worked \n #### ${Math.abs(context.hours_worked_avg_diff[0].value)}% ${fns.gt0(context.hours_worked_avg_diff[0].value, "more", "less")} than usual on ${fns.getDOW(new Date())}'
let context = {
  hours_worked:[{value:10}],
  hours_worked_avg_diff:[{value:10}],

}


function getDOW(now) {
  return moment(now).locale('es').format('dddd')
}

function gt0(_in, tVal, fVal) {
  return _in >0 ? tVal: fVal
}



function templateIt(context, template) {
  const script = new vm.Script('`'+template+'`')
  return script.runInNewContext({context, fns:{getDOW, gt0 }})
}

console.log(templateIt(context, template))

https://repl.it/IdVt/3

Questa soluzione funziona senza ES6:

function render(template, opts) {
  return new Function(
    'return new Function (' + Object.keys(opts).reduce((args, arg) => args += '\'' + arg + '\',', '') + '\'return `' + template.replace(/(^|[^\\])'/g, '$1\\\'') + '`;\'' +
    ').apply(null, ' + JSON.stringify(Object.keys(opts).reduce((vals, key) => vals.push(opts[key]) && vals, [])) + ');'
  )();
}

render("hello ${ name }", {name:'mo'}); // "hello mo"

Nota: il Functioncostruttore viene sempre creato nell'ambito globale, il che potrebbe potenzialmente sovrascrivere le variabili globali dal modello, ad es.render("hello ${ someGlobalVar = 'some new value' }", {name:'mo'});

Dal momento che stiamo reinventando la ruota su qualcosa che sarebbe una caratteristica adorabile in JavaScript.

Io uso eval(), che non è sicuro, ma JavaScript non è sicuro. Ammetto prontamente che non sono eccellente con JavaScript, ma avevo un bisogno e avevo bisogno di una risposta, quindi ne ho fatta una.

Ho scelto di stilizzare le mie variabili con un @anziché con un $, in particolare perché voglio usare la funzione multilinea dei letterali senza valutare fino a quando non è pronta. Quindi la sintassi variabile è@{OptionalObject.OptionalObjectN.VARIABLE_NAME}

Non sono un esperto di JavaScript, quindi sarei lieto di ricevere consigli sul miglioramento, ma ...

var prsLiteral, prsRegex = /\@\{(.*?)(?!\@\{)\}/g
for(i = 0; i < myResultSet.length; i++) {
    prsLiteral = rt.replace(prsRegex,function (match,varname) {
        return eval(varname + "[" + i + "]");
        // you could instead use return eval(varname) if you're not looping.
    })
    console.log(prsLiteral);
}

Segue un'implementazione molto semplice

myResultSet = {totalrecords: 2,
Name: ["Bob", "Stephanie"],
Age: [37,22]};

rt = `My name is @{myResultSet.Name}, and I am @{myResultSet.Age}.`

var prsLiteral, prsRegex = /\@\{(.*?)(?!\@\{)\}/g
for(i = 0; i < myResultSet.totalrecords; i++) {
    prsLiteral = rt.replace(prsRegex,function (match,varname) {
        return eval(varname + "[" + i + "]");
        // you could instead use return eval(varname) if you're not looping.
    })
    console.log(prsLiteral);
}

Nella mia effettiva implementazione, ho scelto di utilizzare @{{variable}}. Un altro set di parentesi graffe. Assurdamente improbabile che lo incontrino inaspettatamente. La regex per questo sarebbe simile/\@\{\{(.*?)(?!\@\{\{)\}\}/g

Per facilitare la lettura

\@\{\{    # opening sequence, @{{ literally.
(.*?)     # capturing the variable name
          # ^ captures only until it reaches the closing sequence
(?!       # negative lookahead, making sure the following
          # ^ pattern is not found ahead of the current character
  \@\{\{  # same as opening sequence, if you change that, change this
)
\}\}      # closing sequence.

Se non hai esperienza con regex, una regola abbastanza sicura è quella di sfuggire a tutti i caratteri non alfanumerici e non sfuggire mai inutilmente alle lettere poiché molte lettere sfuggite hanno un significato speciale praticamente per tutti i gusti di regex.

Dovresti provare questo minuscolo modulo JS, di Andrea Giammarchi, da github: https://github.com/WebReflection/backtick-template

/*! (C) 2017 Andrea Giammarchi - MIT Style License */
function template(fn, $str, $object) {'use strict';
  var
    stringify = JSON.stringify,
    hasTransformer = typeof fn === 'function',
    str = hasTransformer ? $str : fn,
    object = hasTransformer ? $object : $str,
    i = 0, length = str.length,
    strings = i < length ? [] : ['""'],
    values = hasTransformer ? [] : strings,
    open, close, counter
  ;
  while (i < length) {
    open = str.indexOf('${', i);
    if (-1 < open) {
      strings.push(stringify(str.slice(i, open)));
      open += 2;
      close = open;
      counter = 1;
      while (close < length) {
        switch (str.charAt(close++)) {
          case '}': counter -= 1; break;
          case '{': counter += 1; break;
        }
        if (counter < 1) {
          values.push('(' + str.slice(open, close - 1) + ')');
          break;
        }
      }
      i = close;
    } else {
      strings.push(stringify(str.slice(i)));
      i = length;
    }
  }
  if (hasTransformer) {
    str = 'function' + (Math.random() * 1e5 | 0);
    if (strings.length === values.length) strings.push('""');
    strings = [
      str,
      'with(this)return ' + str + '([' + strings + ']' + (
        values.length ? (',' + values.join(',')) : ''
      ) + ')'
    ];
  } else {
    strings = ['with(this)return ' + strings.join('+')];
  }
  return Function.apply(null, strings).apply(
    object,
    hasTransformer ? [fn] : []
  );
}

template.asMethod = function (fn, object) {'use strict';
  return typeof fn === 'function' ?
    template(fn, this, object) :
    template(this, fn);
};

Demo (tutti i seguenti test restituiscono true):

const info = 'template';
// just string
`some ${info}` === template('some ${info}', {info});

// passing through a transformer
transform `some ${info}` === template(transform, 'some ${info}', {info});

// using it as String method
String.prototype.template = template.asMethod;

`some ${info}` === 'some ${info}'.template({info});

transform `some ${info}` === 'some ${info}'.template(transform, {info});

Ho creato la mia soluzione facendo un tipo con una descrizione come funzione

export class Foo {
...
description?: Object;
...
}

let myFoo:Foo = {
...
  description: (a,b) => `Welcome ${a}, glad to see you like the ${b} section`.
...
}

e così facendo:

let myDescription = myFoo.description('Bar', 'bar');

Invece di usare eval meglio è usare regex

Eval non è raccomandato e altamente scoraggiato, quindi per favore non usarlo ( mdn eval ).

 let b = 10;
 let a="b:${b}";

let response = a.replace(/\${\w+}/ ,b);
conssole.log(response);