Konvertieren Sie eine Zeichenfolge in eine Vorlagenzeichenfolge

Ist es möglich, eine Vorlagenzeichenfolge als normale Zeichenfolge zu erstellen?

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

und konvertieren Sie es dann in eine Vorlagenzeichenfolge

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

ohne eval, new Functionund andere Mittel der dynamischen Code - Generierung?

Da Ihre Vorlagenzeichenfolge bdynamisch (zur Laufzeit) auf die Variable verweisen muss, lautet die Antwort: NEIN, ohne dynamische Codegenerierung ist dies nicht möglich.

Aber damit ist evales ziemlich einfach:

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

In meinem Projekt habe ich so etwas mit ES6 erstellt:

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

UPDATE Ich habe die lodash-Abhängigkeit entfernt. ES6 verfügt über äquivalente Methoden zum Abrufen von Schlüsseln und Werten.

Was Sie hier verlangen:

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

ist genau gleichwertig (in Bezug auf Leistung und Sicherheit) eval : der Fähigkeit, eine Zeichenfolge mit Code zu nehmen und diesen Code auszuführen; und auch die Fähigkeit des ausgeführten Codes, lokale Variablen in der Umgebung des Aufrufers zu sehen.

In JS gibt es für eine Funktion keine Möglichkeit, lokale Variablen in ihrem Aufrufer anzuzeigen, es sei denn, diese Funktion ist dies eval(). Function()Kann es sogar nicht.

Wenn Sie hören, dass JavaScript so genannte "Vorlagenzeichenfolgen" enthält, können Sie davon ausgehen, dass es sich um eine integrierte Vorlagenbibliothek wie Moustache handelt. Ist es nicht. Es ist hauptsächlich nur String-Interpolation und mehrzeilige Strings für JS. Ich denke jedoch, dass dies für eine Weile ein weit verbreitetes Missverständnis sein wird. :((

Nein, ohne dynamische Codegenerierung ist dies nicht möglich.

Ich habe jedoch eine Funktion erstellt, die eine reguläre Zeichenfolge in eine Funktion umwandelt, die mithilfe interner Vorlagenzeichenfolgen mit einer Wertekarte versehen werden kann.

Generate Template String Gist

/**
 * 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;
})();

Verwendung:

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

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

Hoffe das hilft jemandem. Wenn Sie ein Problem mit dem Code finden, aktualisieren Sie bitte das Gist.

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

Jeder scheint besorgt über den Zugriff auf Variablen zu sein. Warum nicht einfach übergeben? Ich bin sicher, es wird nicht zu schwierig sein, den variablen Kontext im Aufrufer abzurufen und weiterzugeben. Benutze das https://stackoverflow.com/a/6394168/6563504 , um die Requisiten von obj zu erhalten. Ich kann momentan nicht für dich testen, aber das sollte funktionieren.

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

Geprüft. Hier ist der vollständige Code.

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

Hier geht es darum, eine Funktion zu haben, die Zugriff auf die Variablen ihres Aufrufers hat. Aus diesem Grund wird Direct direkt evalfür die Vorlagenverarbeitung verwendet. Eine mögliche Lösung wäre, eine Funktion zu generieren, die formale Parameter verwendet, die durch die Eigenschaften eines Wörterbuchs benannt sind, und sie mit den entsprechenden Werten in derselben Reihenfolge aufruft. Ein alternativer Weg wäre, etwas Einfaches wie dieses zu haben:

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

Und für jeden, der den Babel-Compiler verwendet, müssen wir einen Abschluss erstellen, der sich an die Umgebung erinnert, in der er erstellt wurde:

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

Hier gibt es viele gute Lösungen, aber noch keine, die die ES6 String.raw-Methode verwenden . Hier ist mein Beitrag. Es hat eine wichtige Einschränkung dahingehend, dass nur Eigenschaften von einem übergebenen Objekt akzeptiert werden, was bedeutet, dass keine Codeausführung in der Vorlage funktioniert.

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. Teilen Sie die Zeichenfolge in nicht argumentative Textteile auf. Siehe Regex .
   parts: ["Hello, ", "! Are you ", " years old?"]
2. Teilen Sie die Zeichenfolge in Eigenschaftsnamen auf. Leeres Array, wenn die Übereinstimmung fehlschlägt.
   args: ["name", "age"]
3. Ordnen Sie die Parameter objanhand des Eigenschaftsnamens zu. Die Lösung wird durch eine flache Zuordnung auf einer Ebene begrenzt. Undefinierte Werte werden durch eine leere Zeichenfolge ersetzt, andere falsche Werte werden jedoch akzeptiert.
   parameters: ["John Doe", 18]
4. Ergebnis nutzen String.raw(...)und zurückgeben.

Ähnlich wie Daniels Antwort (und s.meijers Kern ), aber besser lesbar:

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

Hinweis: Dies verbessert das Original von s.meijer geringfügig, da es nicht mit Dingen wie übereinstimmt ${foo{bar}(der reguläre Ausdruck erlaubt nur nicht geschweifte Klammern in ${und }).

UPDATE: Ich wurde nach einem Beispiel gefragt, also los geht's:

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

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

Sie können beispielsweise den String-Prototyp verwenden

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

Aber die Antwort auf die ursprüngliche Frage ist auf keinen Fall.

Ich mochte die Antwort von s.meijer und schrieb meine eigene Version basierend auf seiner:

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

Ich benötigte diese Methode mit Unterstützung für Internet Explorer. Es stellte sich heraus, dass die Back Ticks nicht einmal von IE11 unterstützt werden. Ebenfalls; Verwenden evaloder es ist gleichwertig Functionfühlt sich nicht richtig an.

Für den, der es bemerkt; Ich benutze auch Backticks, aber diese werden von Compilern wie babel entfernt. Die von anderen vorgeschlagenen Methoden hängen von der Laufzeit ab. Wie gesagt; Dies ist ein Problem in IE11 und niedriger.

Das habe ich mir also ausgedacht:

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

Beispielausgabe:

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 -

Ich kann derzeit keine Kommentare zu vorhandenen Antworten abgeben, daher kann ich Bryan Raynors hervorragende Antwort nicht direkt kommentieren. Daher wird diese Antwort seine Antwort mit einer leichten Korrektur aktualisieren.

Kurz gesagt, seine Funktion kann die erstellte Funktion nicht tatsächlich zwischenspeichern, sodass sie immer neu erstellt wird, unabhängig davon, ob die Vorlage zuvor angezeigt wurde. Hier ist der korrigierte Code:

    /**
     * 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, die Lösung funktioniert hervorragend, aber wenn ich sie in React Native (Build-Modus) verwendet habe, wird ein Fehler ausgegeben : Ungültiges Zeichen '`' , obwohl sie funktioniert, wenn ich sie im Debug-Modus ausführe.

Also habe ich meine eigene Lösung mit Regex aufgeschrieben.

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/

HINWEIS: Da ich die Grundursache eines Problems nicht kenne, habe ich ein Ticket im reaktionsnativen Repo https://github.com/facebook/react-native/issues/14107 ausgestellt , damit sie es können fix / führe mich ungefähr gleich :)

Immer noch dynamisch, scheint aber kontrollierter zu sein als nur eine nackte Bewertung zu verwenden:

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

Diese Lösung funktioniert ohne 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"

Beachten Sie das Function Konstruktor wird immer im globalen Bereich erstellt, was möglicherweise dazu führen kann, dass globale Variablen von der Vorlage überschrieben werden, zrender("hello ${ someGlobalVar = 'some new value' }", {name:'mo'});

Da wir das Rad auf etwas neu erfinden, das eine schöne Funktion in Javascript wäre.

ich benutze eval() , was nicht sicher ist, aber Javascript ist nicht sicher. Ich gebe gerne zu, dass ich mit Javascript nicht besonders gut umgehen kann, aber ich hatte ein Bedürfnis, und ich brauchte eine Antwort, also habe ich eine gemacht.

Ich habe mich dafür entschieden, meine Variablen @eher mit einem als mit einem zu stilisieren $, insbesondere weil ich die mehrzeilige Funktion von Literalen verwenden möchte, ohne sie auszuwerten, bis sie fertig sind. Die variable Syntax ist also@{OptionalObject.OptionalObjectN.VARIABLE_NAME}

Ich bin kein Javascript-Experte, daher würde ich gerne Ratschläge zur Verbesserung erhalten, aber ...

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

Es folgt eine sehr einfache Implementierung

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

In meiner tatsächlichen Implementierung entscheide ich mich für die Verwendung @{{variable}}. Noch ein Satz Zahnspangen. Es ist absurd unwahrscheinlich, dass dies unerwartet auftritt. Die Regex dafür würde aussehen/\@\{\{(.*?)(?!\@\{\{)\}\}/g

Um das Lesen zu erleichtern

\@\{\{    # 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.

Wenn Sie nicht mit Regex erlebt, eine ziemlich sichere Regel ist jede nicht-alphanumerischen Zeichen zu entkommen, und nicht immer unnötig Buchstaben entkommen so viele entkam Buchstaben besondere Bedeutung zu praktisch alle Varianten von regex haben.

Sie sollten dieses winzige JS-Modul von Andrea Giammarchi von github ausprobieren: 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 (alle folgenden Tests geben true zurück):

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

Ich habe meine eigene Lösung gemacht, indem ich einen Typ mit einer Beschreibung als Funktion erstellt habe

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

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

und so:

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

Anstatt eval besser zu verwenden, wird Regex verwendet

Eval ist nicht zu empfehlen und wird dringend empfohlen. Verwenden Sie es daher nicht ( mdn eval ).

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

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