JS字符串插值中${total}出现两种不同错误的原因咨询

嘿，这个问题本质是JavaScript的变量作用域和变量提升在搞事情，我给你拆解清楚两段代码的差异：

第一段代码为啥能正常运行 #

先看第一段的代码：

function placeOrder(cardNumber) { 
  if (typeof cardNumber === 'undefined') { 
    return "Sorry, we don't have a credit card on file for you." 
  } else { 
    let cartTotal = total(); 
    cart = [] 
    return `Your total cost is $${total}, which will be charged to the card ${cardNumber}.` 
  } 
}

这里的核心是：

• 你用let声明了局部变量cartTotal，它只在当前的else块作用域里有效，完全不会影响外部的total函数。
• 模板字符串里的${total}，其实引用的是你外部定义的那个total函数本身（不是它的返回值哦，如果你想显示总价，应该写${cartTotal}才对）。但不管怎样，这段代码不会报错，因为total这个名字在当前作用域里没有被覆盖，依然指向原来的函数。

第二段代码为啥会抛出TypeError #

再看第二段的问题代码：

function placeOrder(cardNumber) { 
  if (typeof cardNumber === 'undefined') { 
    return "Sorry, we don't have a credit card on file for you." 
  } else { 
    total = total(); 
    cart = [] 
    return `Your total cost is $${total}, which will be charged to the card ${cardNumber}.` 
  } 
}

这里踩了两个坑：

1. 没有用声明关键字定义变量：你写的total = total();没有加let/const/var，这会让JavaScript把total当成全局变量来创建。
2. 变量提升搞的鬼：在函数作用域里，这个未声明的total会被“提升”到作用域顶部，但此时它的值是undefined。当你尝试执行total()时，相当于调用undefined()，这当然会抛出TypeError: total is not a function——因为undefined根本不是函数啊！

简单说，你在调用原来的total函数之前，就已经把total这个名字给覆盖成了一个未初始化的全局变量，导致原来的函数找不到了。

正确的写法应该是这样 #

如果你想把total函数的返回值存起来复用，一定要用let/const声明一个局部变量，别碰全局的total函数：

function placeOrder(cardNumber) { 
  if (typeof cardNumber === 'undefined') { 
    return "Sorry, we don't have a credit card on file for you." 
  } else { 
    const orderTotal = total(); // 用局部变量存返回值，不影响外部的total函数
    cart = [] 
    return `Your total cost is $${orderTotal}, which will be charged to the card ${cardNumber}.` 
  } 
}

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