ES6中的标记模板有哪些功能?

时间:2016-06-24 08:39:05

标签: javascript ecmascript-6 template-literals

我正在训练ES6,但是当我阅读标记模板并且不了解它并且不知道它能做什么时?

请帮我清除。

谢谢,

2 个答案:

答案 0 :(得分:2)

  

标签只是一个用处理过的模板文字数据调用的函数。标签将有关模板文字的数据作为单个部分接收,并且必须组合这些部分以创建结果。第一个参数是一个包含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

答案 1 :(得分:0)

标签是一种能够解释和处理模板的功能。标签出现在模板的前面,因此在以下代码中标签是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是一个标签,现在运行功能测试并将2个参数传递给1.literals 2.values

  1. 文字基本上是标记模板的字符串
  2. values是模板中使用的占位符。
  3. 这里的文字是 “你好,” 2.“,” 3.“;”

    值是[斯科特,艾伦]