Convertir une chaîne en chaîne de modèle

Est-il possible de créer une chaîne de modèle comme une chaîne habituelle

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

puis le convertir en chaîne de modèle

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

sans eval, new Functionet d'autres moyens de génération de code dynamique?

Comme votre chaîne de modèle doit obtenir une référence à la bvariable de manière dynamique (au moment de l'exécution), la réponse est: NON, il est impossible de se passer de la génération de code dynamique.

Mais avec evalc'est assez simple:

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

Dans mon projet, j'ai créé quelque chose comme ça avec 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);

MISE À JOUR J'ai supprimé la dépendance de lodash, ES6 a des méthodes équivalentes pour obtenir des clés et des valeurs.

Ce que vous demandez ici:

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

est exactement équivalent (en termes de puissance et, euh, de sécurité) à eval : la capacité de prendre une chaîne contenant du code et d'exécuter ce code; et aussi la possibilité pour le code exécuté de voir les variables locales dans l'environnement de l'appelant.

Il n'y a aucun moyen dans JS pour une fonction de voir les variables locales dans son appelant, à moins que cette fonction ne le soit eval(). Function()Je ne peux même pas le faire.

Lorsque vous entendez qu'il y a quelque chose appelé "chaînes de modèles" venant de JavaScript, il est naturel de supposer qu'il s'agit d'une bibliothèque de modèles intégrée, comme Moustache. Ça ne l'est pas. Il s'agit principalement d'une interpolation de chaînes et de chaînes multilignes pour JS. Je pense cependant que ce sera une idée fausse courante pendant un certain temps. :(

Non, il n'y a pas moyen de faire cela sans génération de code dynamique.

Cependant, j'ai créé une fonction qui transformera une chaîne régulière en une fonction qui peut être fournie avec une carte de valeurs, en utilisant des chaînes de modèle en interne.

Générer la liste de chaînes de modèle

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

Usage:

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

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

J'espère que cela aide quelqu'un. Si vous rencontrez un problème avec le code, veuillez mettre à jour le Gist.

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

Tout le monde semble s'inquiéter d'accéder aux variables, pourquoi ne pas simplement les transmettre? Je suis sûr qu'il ne sera pas trop difficile d'obtenir le contexte variable dans l'appelant et de le transmettre. Utilisez ce https://stackoverflow.com/a/6394168/6563504 pour obtenir les accessoires de obj. Je ne peux pas tester pour vous pour le moment, mais cela devrait fonctionner.

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

Testé. Voici le code complet.

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

Le problème ici est d'avoir une fonction qui a accès aux variables de son appelant. C'est pourquoi nous voyons l'utilisation directe evalpour le traitement des modèles. Une solution possible serait de générer une fonction prenant des paramètres formels nommés par les propriétés d'un dictionnaire, et l'appelant avec les valeurs correspondantes dans le même ordre. Une autre manière serait d'avoir quelque chose de simple comme ceci:

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

Et pour quiconque utilise le compilateur Babel, nous devons créer une fermeture qui se souvient de l'environnement dans lequel il a été créé:

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

Il existe de nombreuses bonnes solutions publiées ici, mais aucune n'utilise encore la méthode ES6 String.raw . Voici ma contribution. Il a une limitation importante en ce qu'il n'acceptera que les propriétés d'un objet passé, ce qui signifie qu'aucune exécution de code dans le modèle ne fonctionnera.

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. Divisez la chaîne en parties textuelles sans argument. Voir regex .
   parts: ["Hello, ", "! Are you ", " years old?"]
2. Divisez la chaîne en noms de propriétés. Tableau vide si la correspondance échoue.
   args: ["name", "age"]
3. Mappez les paramètres objpar nom de propriété. La solution est limitée par une cartographie à un niveau peu profonde. Les valeurs non définies sont remplacées par une chaîne vide, mais d'autres valeurs erronées sont acceptées.
   parameters: ["John Doe", 18]
4. Utiliser String.raw(...)et renvoyer le résultat.

Similaire à la réponse de Daniel (et à l' essentiel de mon collègue ) mais plus lisible:

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

Remarque: Cela améliore légèrement l'original de s.meijer, car il ne correspondra pas à des choses comme ${foo{bar}(le regex autorise uniquement les caractères non bouclés à l'intérieur ${et }).

MISE À JOUR: On m'a demandé un exemple d'utilisation de ceci, alors voilà:

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

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

Vous pouvez utiliser le prototype de chaîne, par exemple

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

Mais la réponse à la question initiale n'est pas possible.

J'ai aimé la réponse de mon collègue et j'ai écrit ma propre version basée sur la sienne:

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

J'avais besoin de cette méthode avec le support d'Internet Explorer. Il s'est avéré que les tiques arrière ne sont même pas prises en charge par IE11. Aussi; utiliser evalou son équivalent Functionne semble pas correct.

Pour celui qui remarque; J'utilise également des backticks, mais ceux-ci sont supprimés par des compilateurs comme babel. Les méthodes suggérées par d'autres dépendent d'elles au moment de l'exécution. Comme dit précédemment; il s'agit d'un problème dans IE11 et les versions antérieures.

Voici donc ce que j'ai proposé:

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

Exemple de sortie:

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 -

Je ne peux actuellement pas commenter les réponses existantes, donc je ne peux pas commenter directement l'excellente réponse de Bryan Raynor. Ainsi, cette réponse va mettre à jour sa réponse avec une légère correction.

En bref, sa fonction ne parvient pas à mettre en cache la fonction créée, elle sera donc toujours recréée, qu'elle ait ou non vu le modèle auparavant. Voici le code corrigé:

    /**
     * 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 solution fonctionne très bien, mais quand je l'ai utilisée dans React Native (mode construction), elle génère une erreur: caractère invalide '' ' , bien que cela fonctionne lorsque je l'exécute en mode débogage.

J'ai donc écrit ma propre solution en utilisant 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)

Démo: https://es6console.com/j31pqx1p/

REMARQUE: comme je ne connais pas la cause profonde d'un problème, j'ai soulevé un ticket dans le repo react-native, https://github.com/facebook/react-native/issues/14107 , afin qu'une fois qu'ils puissent corrige / guide-moi à peu près pareil :)

Toujours dynamique mais semble plus contrôlé que la simple utilisation d'une évaluation nue:

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

Cette solution fonctionne sans 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"

Remarque: le Functionconstructeur est toujours créé dans la portée globale, ce qui pourrait entraîner l'écrasement des variables globales par le modèle, par exemplerender("hello ${ someGlobalVar = 'some new value' }", {name:'mo'});

Puisque nous réinventons la roue sur quelque chose qui serait une fonctionnalité intéressante en javascript.

j'utilise eval() , ce qui n'est pas sécurisé, mais javascript n'est pas sécurisé. J'avoue volontiers que je ne suis pas excellent avec javascript, mais j'avais un besoin, et j'avais besoin d'une réponse alors j'en ai fait une.

J'ai choisi de styliser mes variables avec un @plutôt qu'un $, en particulier parce que je veux utiliser la fonctionnalité multiligne des littéraux sans évaluer jusqu'à ce qu'elle soit prête. La syntaxe variable est donc@{OptionalObject.OptionalObjectN.VARIABLE_NAME}

Je ne suis pas un expert javascript, donc je prendrais volontiers des conseils d'amélioration mais ...

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

Une implémentation très simple suit

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

Dans ma mise en œuvre réelle, je choisis d'utiliser @{{variable}}. Un autre ensemble d'accolades. Il est peu probable de rencontrer cela de manière inattendue. Le regex pour cela ressemblerait à/\@\{\{(.*?)(?!\@\{\{)\}\}/g

Pour rendre cela plus facile à lire

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

Si vous n'êtes pas expérimenté avec les regex, une règle assez sûre est d'échapper à tous les caractères non alphanumériques, et de ne jamais échapper inutilement aux lettres, car de nombreuses lettres échappées ont une signification spéciale pour pratiquement toutes les saveurs de regex.

Vous devriez essayer ce petit module JS, par Andrea Giammarchi, de 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);
};

Démo (tous les tests suivants retournent vrai):

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

J'ai fait ma propre solution en faisant un type avec une description comme fonction

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

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

et ainsi de suite:

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

Au lieu d'utiliser eval, mieux vaut utiliser pour regex

Eval n'est pas recommandé et fortement déconseillé, veuillez donc ne pas l'utiliser ( mdn eval ).

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

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