推迟ES6模板文字的执行

Question

我正在玩新的ES6模板文字功能，我首先想到的是一个＜code＞字符串。为JavaScript格式化，所以我开始实现一个原型：

String.prototype.format = function() {
  var self = this;
  arguments.forEach(function(val,idx) {
    self["p"+idx] = val;
  });
  return this.toString();
};
console.log(`Hello, ${p0}. This is a ${p1}`.format("world", "test"));

ES6Fiddle

但是，模板文字在传递给我的原型方法之前会被评估。有没有什么方法可以编写上面的代码来将结果推迟到我动态创建元素之后？

Answer 1

AFAIS的有用功能“字符串模板的延迟执行”仍然不可用。然而，使用lambda是一种富有表现力、可读性和简短的解决方案：

var greetingTmpl = (...p)=>`Hello, ${p[0]}. This is a ${p[1]}`;

console.log( greetingTmpl("world","test") );
console.log( greetingTmpl("@CodingIntrigue","try") );

Answer 2

扩展@Bergi的答案，当你意识到你可以返回任何结果，而不仅仅是普通的字符串时，带标签的模板字符串的力量就显现出来了。在他的例子中，标签用闭包和函数属性< code>format构造并返回一个对象。

在我最喜欢的方法中，我自己返回一个函数值，您可以稍后调用它并传递新参数来填充模板。这样地：

function fmt([fisrt, ...rest], ...tags) {
  return values => rest.reduce((acc, curr, i) => {
    return acc + values[tags[i]] + curr;
  }, fisrt);
}

或者，对于代码高尔夫球手：

let fmt=([f,...r],...t)=>v=>r.reduce((a,c,i)=>a+v[t[i]]+c,f)

然后，构建模板并推迟替换：

> fmt`Test with ${0}, ${1}, ${2} and ${0} again`(['A', 'B', 'C']);
// 'Test with A, B, C and A again'
> template = fmt`Test with ${'foo'}, ${'bar'}, ${'baz'} and ${'foo'} again`
> template({ foo:'FOO', bar:'BAR' })
// 'Test with FOO, BAR, undefined and FOO again'

另一个选项，更接近您所写的内容，是返回从字符串扩展的对象，让duck键入出框并尊重接口。＜code＞字符串的扩展。prototype＜/code＞将无法工作，因为您需要关闭模板标记才能稍后解析参数。

class FormatString extends String {
  // Some other custom extensions that don't need the template closure
}

function fmt([fisrt, ...rest], ...tags) {
  const str = new FormatString(rest.reduce((acc, curr, i) => `${acc}\${${tags[i]}}${curr}`, fisrt));
  str.format = values => rest.reduce((acc, curr, i) => {
    return acc + values[tags[i]] + curr;
  }, fisrt);
  return str;
}

然后，在呼叫站点中：

> console.log(fmt`Hello, ${0}. This is a ${1}.`.format(["world", "test"]));
// Hello, world. This is a test.
> template = fmt`Hello, ${'foo'}. This is a ${'bar'}.`
> console.log(template)
// { [String: 'Hello, ${foo}. This is a ${bar}.'] format: [Function] }
> console.log(template.format({ foo: true, bar: null }))
// Hello, true. This is a null.

您可以在其他答案中参考更多信息和应用html" target="_blank">程序。

Answer 3

我认为有三种方法可以解决这个问题:

>

使用模板字符串，就像设计用来使用的一样，没有任何格式函数：

console.log(`Hello, ${"world"}. This is a ${"test"}`);
// might make more sense with variables:
var p0 = "world", p1 = "test";
console.log(`Hello, ${p0}. This is a ${p1}`);

或者甚至是用于实际推迟评估的函数参数:

const welcome = (p0, p1) => `Hello, ${p0}. This is a ${p1}`;
console.log(welcome("world", "test"));

不要使用模板字符串，而是使用普通的字符串文字:

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\$\{p(\d)\}/g, function(match, id) {
        return args[id];
    });
};
console.log("Hello, ${p0}. This is a ${p1}".format("world", "test"));

使用带标签的模板文本。请注意，处理程序仍然会在不拦截的情况下对替换进行计算，因此如果没有名为so的变量，就不能使用像< code>p0这样的标识符。< s >如果接受不同的替换体语法建议，此行为可能会改变(更新:它不是)。

function formatter(literals, ...substitutions) {
    return {
        format: function() {
            var out = [];
            for(var i=0, k=0; i < literals.length; i++) {
                out[k++] = literals[i];
                out[k++] = arguments[substitutions[i]];
            }
            out[k] = literals[i];
            return out.join("");
        }
    };
}
console.log(formatter`Hello, ${0}. This is a ${1}`.format("world", "test"));
// Notice the number literals: ^               ^