请求解析两段JavaScript greet函数执行结果差异的原因

第一段代码的执行逻辑 #

function greet(name) {
  let hours = 11;
  let time = "";

  if (hours >= 4 && hours < 12) {
    time = "Good Morning";
  } else {
    time = "hi";
  }

  return `${time}, ${name}`;
}

greet("Ali");

这段代码里，模板字符串${time}, ${name}是在time完成赋值之后才执行拼接的：

• 先通过if判断给time赋了"Good Morning"的值，再用这个最新的time和name生成最终字符串，所以能得到正确的"Good Morning, Ali"。

第二段代码的执行逻辑 #

function greet(name) {
  let hours = 11;
  let time = "";
  let result = `${time}, ${name}`;

  if (hours >= 4 && hours < 12) {
    time = "Good Morning";
  } else {
    time = "hi";
  }

  return result;
}

greet("Ali");

这段代码的问题出在模板字符串的执行时机：

• 初始化time为空字符串后，立刻就用它生成了result，此时time是空，所以result直接变成了" , Ali"这个固定字符串。
• 后面修改time的值只是改变了变量本身，不会影响已经生成的result字符串——因为模板字符串在创建时就已经把当时的变量值“固化”进去了，后续变量变化和它无关。

内容的提问来源于stack exchange，提问作者Safar Ali