ES6模板字符串循环问题：浏览器提示缺失}的排查与疑问

我来帮你拆解这两个核心问题：为什么会出现“模板字符串缺失}”的提示，以及为什么forEach会导致功能失效。

一、为什么浏览器提示“模板字符串中缺失}”？ #

这个错误最常见的原因是你没有把forEach的逻辑放在模板字符串的插值表达式${}内部，导致嵌套的模板字符串被解析器误判。举个典型的错误写法：

const fruits = ['苹果', '香蕉'];
const html = `<ul>
  fruits.forEach(item => `<li>${item}</li>`)
</ul>`;

这里的问题在于：外层模板字符串是用反引号`包裹的，当解析器遇到forEach回调里的`<li>${item}</li>`时，它会把这个`当成外层模板字符串的结束标记。这直接导致外层模板字符串提前“收尾”，后面的)等内容变成了无效语法，解析器自然会提示“缺失}”——因为它认为你没写完外层模板字符串的闭合逻辑。

你尝试加;解决是没用的，因为核心问题是模板字符串的嵌套没有用插值表达式包裹，解析器的语法判断已经出错了。

修正语法错误的基础写法应该是把整个forEach调用放在${}里：

const fruits = ['苹果', '香蕉'];
const html = `<ul>
  ${fruits.forEach(item => `<li>${item}</li>`)}
</ul>`;

不过这样写虽然语法上没问题，但会引出第二个问题——功能失效。

二、为什么forEach会导致功能失效？ #

因为forEach方法的设计目的是执行副作用（比如遍历数组做一些操作），它本身没有返回值（始终返回undefined）。所以当你把forEach放在模板字符串的${}里时，插值的结果就是undefined，自然看不到你想要的列表内容。

而map方法则不同，它会返回一个新数组，数组里是你回调函数返回的每个<li>${item}</li>字符串。不过注意，直接用map的话，数组转字符串会默认用逗号分隔，所以通常需要加上.join('')来去掉逗号：

const fruits = ['苹果', '香蕉'];
const html = `<ul>
  ${fruits.map(item => `<li>${item}</li>`).join('')}
</ul>`;

总结一下：

• 解决“缺失}”的错误：必须把动态逻辑放在${}插值表达式内部，避免裸写嵌套的反引号模板字符串。
• 解决功能失效：如果需要在模板字符串中生成动态内容，优先用有返回值的方法（比如map），而不是forEach这类执行副作用的方法。

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