为何JavaScript for循环中变量累加后模板字符串值不更新？

先看你写的代码：

let numero = 0;
const string = `aaa: ${numero}`

for(let i=0; i<3;i++) {
  console.log(string)
  numero += 1
}

console.log(numero)

运行结果你贴的是：

aaa: 1
aaa: 1
aaa: 1
4

问题出在模板字符串的求值时机上：你定义const string = \aaa: ${numero}`的时候，JavaScript会立刻把当时numero的值代入，生成固定的静态字符串。之后不管numero怎么变，string`都已经是个固定值了，不会自动跟着更新。

你以为每次console.log(string)都会重新用最新的numero生成字符串，但实际上string从定义好的那一刻起就和numero没关系了。

要解决这个问题，有两种简单办法：

• 把字符串生成逻辑放到循环内部，每次循环都重新创建模板字符串：

let numero = 0;

for(let i=0; i<3;i++) {
  // 每次循环都用当前的numero生成新字符串
  const string = `aaa: ${numero}`
  console.log(string)
  numero += 1
}

console.log(numero)

这样输出就会是aaa: 0、aaa: 1、aaa: 2，最后numero为3。

• 用函数动态返回字符串，每次调用时才计算最新值：

let numero = 0;
// 每次调用函数，才会重新获取numero的当前值生成字符串
const getString = () => `aaa: ${numero}`

for(let i=0; i<3;i++) {
  console.log(getString())
  numero += 1
}

console.log(numero)

这种方式更灵活，适合需要多次复用字符串生成逻辑的场景。

另外你贴的运行结果里最后numero是4，可能是实际循环次数或初始值和代码不一致，但这不影响核心问题的解释。

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