es6 字符串模板是否在更新其中的变量时更新

Is es6 string template updated when variable inside it updates

本文关键字：更新 变量 字符串 是否 es6      更新时间：2023-09-26

假设我有一个片段如下： 

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

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

它是

静态的。你可以把它想象成另一种语言的string.format。为了使它是动态的，它需要观察变量，这将在性能和灵活性方面花费很多。

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

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

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'

您的示例 

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

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

来自 MDN

模板文本是允许嵌入表达式的字符串文本。您可以将多行字符串和字符串插值功能与它们一起使用。它们在ES2015/ES6规范的先前版本中被称为"模板字符串"。

模板文本是一个函数，它将占位符内的表达式(例如在示例中${temp}(和字符串文本作为参数放入一个函数中，该函数将它们连接成单个字符串。

适用于

一般用法中的javascript的相同范围规则在这里适用。在您的情况下，编译器将首先运行代码并限定 LHS 引用的范围var temp和var template，但赋值将在运行时发生。

由于变量 temp 的第二次赋值(此处使用反模式 var temp 第二次声明(发生在模板文本运行以连接字符串之后，因此var template被分配字符串"I am a "，因为它使用模板文字函数运行时在范围内的 RHS var temp赋值，即 var temp = '' .

可在此处找到模板文本的文档。

返回您的(修改后的(代码这演示了编译器在第一次传递和运行时采取的步骤，显示了 ES6 模板文本未更新的原因和原因。

第一遍：

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

第二遍：

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'
相关文章：