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

.．.让它“更好”。

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

当前回答

简化@metamorphasi提供的答案;

const fillTemplate = function(templateString, templateVars){ var func = new函数(…Object.keys(templateVars)， "return ' "+templateString +" ';") 返回func(…Object.values (templateVars)); ｝ / /样本 var hosting = "overview/id/d:${id}"; var domain = {Id:1234，用户:22}; var result = fillTemplate(主机，域); console.log(结果);

2018-10-15 13:38:26

其他回答

我只是发布了一个npm包，它可以简单地完成这项工作。深受这个答案的启发。

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

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

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

它的实现非常简单。希望你会喜欢。


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

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

2019-02-22 01:45:05

2020-07-13 08:04:12

如果你使用的是Angular，你可以像下面这样使用@ngx-translate/core包:

import { TranslateDefaultParser } from '@ngx-translate/core';

export class SomeClass {
    public parser = new TranslateDefaultParser();
    test() {
        // outputs "This is my great reusable template!"
        this.parser.interpolate('This is my {{expletive}} reusable template!', { expletive: 'great' });
    }
    ...
}

2021-12-07 22:28:09

这是我最好的尝试:

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

UPDATED:下面的答案仅限于单个变量名，因此，'Result ${a+b}'这样的模板在这种情况下无效。然而，你总是可以使用模板值:

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

最初的回答:

基于之前的答案，但创建了一个更“友好”的实用函数:

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

    return tpl_func.call(params);
}

你可以像这样开具发票:

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

结果字符串应该是:

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

2017-11-16 10:57:48

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

推荐文章

最新文章

标签