ES6模板文字可以在运行时被替换(或重用)吗?

tl;dr:有可能使一个可重用的模板文字吗?

我一直试图使用模板文字，但我想我只是不明白，现在我感到沮丧。我是说，我觉得我懂了，但"它"不应该是这样的，也不应该是这样的。情况应该有所不同。

我看到的所有示例(甚至是带标签的模板)都要求“替换”在声明时完成，而不是在运行时完成，这对模板来说似乎完全没有用。也许我疯了，但“模板”对我来说是一个包含标记的文档，这些标记在你使用它时被替换，而不是在你创建它时，否则它只是一个文档(即字符串)。模板存储与令牌作为令牌&这些令牌评估时，你…评估它。

每个人都举了一个可怕的例子:

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

这很好，但如果我已经知道a，我只会返回'一文不值asd'或返回'一文不值'+a。有什么意义?认真对待。好吧，重点是懒惰;加号少，可读性强。太好了。但这不是模板!恕我直言。MHO才是最重要的!问题，恕我直言，是模板在声明时被求值，所以，如果你这样做，恕我直言:

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

由于没有声明expletive，它输出类似于My undefined template的内容。超级。实际上，至少在Chrome中，我甚至不能声明模板;它抛出一个错误，因为没有定义咒骂。我需要的是能够在声明模板后进行替换:

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

然而，我不明白这是怎么可能的，因为这些都不是真正的模板。即使你说我应该使用标签，不，它们不起作用:

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

这一切都让我相信模板文字的名字是可怕的错误，应该被称为他们真正的名字:heredocs。我猜“字面”部分应该提示我(在，不可变)?

我遗漏了什么吗?是否有一种(好的)方法来创建一个可重用的模板文字?

我给你，可重用的模板文字

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

这里是一个简单的“helper”函数…

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

.．.让它“更好”。

我倾向于称它们为模板肠，因为它们产生扭曲感觉的区域。

当前回答

如果你不想使用有序参数或上下文/命名空间来引用模板中的变量，例如${0}，${this. xml。Something}，或者${data。Something}，你可以有一个模板函数来为你处理范围。

如何调用这样一个模板的例子:

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

模板函数:

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

在这种情况下，你只需要传递一个返回ES6模板文字的函数(在这个例子中，我使用了一个箭头函数)。我认为要得到我们所追求的那种可重用的插值，这是一个小小的权衡。

这里是GitHub: https://github.com/Adelphos/ES6-Reuseable-Template

2018-01-30 00:32:57

其他回答

简单的答案是使用_。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!'

2019-02-12 00:25:26

运行时模板字符串

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

2019-11-28 07:51:09

可以使用以下函数动态解析模板，提供新数据。

这使用了javascript的一个不太常见的特性，称为Tagged Template Literal


function template(...args) {
  return (values) =>
    args[0].reduce(
      (acum, current, index) => 
        acum.concat(
          current, values[index] === undefined ? '' : values[index]
        ),
      ''
    )
}

const person = 'Lydia';
const age = 21;

template `${person} is ${age} years old... yes He is ${age}`(['jose', 35, 38]); //?

2021-01-15 03:55:24

这是我最好的尝试:

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

generalify:

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

如果你没有运行E6，你也可以这样做:

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

这似乎比前面的回答更简洁一些。

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

2018-03-28 15:47:41

2021年出现了迄今为止最直接的解决方案。

const tl = $ =>`This ${$.val}`;
tl({val: 'code'});

这几乎等同于仅仅编写和重用模板文字(OP想要的)。

你可以从这里开始调整……

2021-02-07 19:35:33

ES6模板文字可以在运行时被替换(或重用)吗?

推荐文章

最新文章

标签