JavaScript 中的标记模板文字

Question

将脚趾伸入 JavaScript。在 C、C++ 和 Python 之后，JavaScript 就像狂野的西部。有人可以解释为什么我得到没有任何意义的输出：

var a = 5;
var b = 10;

function foo(strings, ...values) {
    let a = values[0];
    let b = values[1];

    return `Sum ${a + b} Product ${a * b}  Division ${b / a}`;
}

console.log(foo`Num1 ${a + 10} Num2 ${b * 2}  Num3 ${b / a}`);

输出： 求和35乘积300除法1.3333333333333333

Answer 1

函数中显示给您的值如下：

let strings = ['Num1 ', ' Num2 ', '  Num3 ', ''];
let values = [15, 20, 2]; // a+10, b*2, b/a

您要返回：

`Sum ${15 + 20} Product ${15 * 20}  Division ${15 / 20}`

这是预期的，因为它评估了模板，然后运行它们也在标签内。

Answer 2

来自MDN Tagged templates：

Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.

The tag function can then perform whatever operations on these arguments you wish, and return the manipulated string.

这似乎是一个不寻常的构造，但您的代码演示了它是如何工作的。 strings 参数是一个数组 ['Num1 ', 'Num2 ', 'Num3 ', '']，它们是表达式之前、之间和之后的文字，values 是计算的表达式 [15, 20, 2].

JavaScript 中的标记模板文字

Tagged Template Literals in JavaScript

javascript

template-literals