javascript - ES6 中的标记模板可以做什么？

Question

我正在训练 ES6，但是当我阅读 Tagged Templates 并且不理解它并且不知道它可以做什么时？

请帮我清除它。

谢谢，

Answer 1

标记只是一个使用已处理的模板文字数据调用的函数。标签接收有关模板文字的数据作为单独的部分，并且必须组合这些部分以创建结果。第一个参数是一个数组，包含由 JavaScript 解释的文字字符串

function foo(strings, ...values) {
    console.log( strings );
    console.log( values );
}

var desc = "awesome";

foo`Everything is ${desc}!`;

这里第一个参数是所有字符串文字 [ "Everything is ", "!"]，替换成为所有被引用的插值字符串[ "awesome" ]。

您可以参考这些文档以获得更多解释。

http://exploringjs.com/es6/ch_template-literals.html

https://ponyfoo.com/articles/es6-template-strings-in-depth#demystifying-tagged-templates

https://leanpub.com/understandinges6/read/#leanpub-auto-tagged-templates

https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/ch2.md#tagged-template-literals

Answer 2

标签是一个能够解释和处理模板的函数。标签出现在模板的前面，所以在下面的代码中标签是test。

let test = function(literals, ...values) {
    expect(literals.length).toBe(3);
    expect(literals[0]).toBe("Hello, ");
    expect(literals[1]).toBe(", ");
    expect(literals[2]).toBe("!");

    expect(values.length).toBe(2);
    expect(values[0]).toBe("Allen");
    expect(values[1]).toBe("Scott");

    return "test";
};

let firstName = "Scott";
let lastName = "Allen";
let result = test `Hello, ${lastName}, ${firstName}!`;

这里 test 是一个标签，现在将运行函数 test 并将 2 个参数传递给 1.literals 2.values

1. 文字基本上是标记模板的字符串
2. values 是模板中使用的占位符。

这里的文字是 1. "Hello, " 2. ", " 3. ";"

值为 [斯科特，艾伦]