Question

假设我有一个片段如下：

var temp='';
var template=`I am a ${temp}`;
var temp='developer';

因此，当我在第二次分配temp之后访问模板时，结果会是什么？ es6字符串模板在创建时是动态模板还是静态模板？

Answer 1

它是静止的。您可以将其视为来自其他语言的string.format。为了使它变得动态，它需要观察变量，这些变量在性能和灵活性方面会花费很多。

如果您正在寻找HTML中的字符串绑定，请查看AngularJS或ReactJS或KnockoutJS或VueJS或RivetsJS等框架或其他十几个。

Answer 2

模板字符串不是活动的，但您可以使用标记模板来伪造它

function live(strings, ...values) {
  var arr = new Array(strings.length*2 - 1);
  strings.forEach((str,i) => arr[i*2] = str);
  return {toString() {
    values.forEach((obj,i) => arr[i*2+1] = obj.value);
    return arr.join('');
  }};
}
var temp = {value: ''};
var template = live`I am a ${temp}`;
console.log(template + ''); // 'I am a '
temp.value = 'developer';
console.log(template + ''); // 'I am a developer'

Answer 3

你的例子

var template=`I am a ${temp}`;

是模板文字的一个示例，自ES2015 / ES6更新以来一直称为模板文字（它们被称为模板字符串，但已经更新，请参阅文档）。

来自MDN

模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。他们被称为＆＃34;模板字符串＆＃34;在ES2015 / ES6规范的先前版本中。

模板文字是一个函数，它将占位符中的表达式（例如在您的示例中为${temp}）和字符串文字作为参数，将它们连接成一个字符串。

适用于一般用法的javascript的相同范围规则适用于此处。在您的情况下，编译器将首先运行LHS引用var temp和var template的代码和范围，但分配将在运行时进行。

由于变量temp的第二次赋值（这里使用反模式var temp第二次声明）出现之后，模板文字运行以连接字符串， var template被赋予字符串"I am a "，因为它使用模板文字函数运行时var temp范围内的var temp = ''的RHS赋值，即var temp=''; ^^^^^^^^ compiler makes first pass LHS reference temp var template=`I am a ${temp}`; ^^^^^^^^^^^^ compiler makes first pass LHS reference template temp='developer'; ^^^^ compiler recognises temp has already been allocated。

The docs for template literals can be found here.

返回（修改后的）代码 这演示了编译器在第一遍和运行时所采取的步骤，显示了ES6模板文字不更新的原因以及原因。

第一遍：

var temp=''; ^^^^^^^^^^^ compiler makes an RHS assignment to the variable temp // => temp === '' var template=`I am a ${temp}`; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ compiler makes an RHS assignment to variable template // => template === "I am a " temp='developer'; ^^^^^^^^^^^^^^^^ compiler makes an RHS assignment to variable temp // => temp === "developer'

第二遍：

2D

当es6中的变量更新时，是否更新了es6字符串模板

3 个答案: