模板字面量内声明变量：全局正常但模块导入报错问题

问题场景 #

在全局上下文运行以下代码时完全正常：

console.log(`${text = "It works!", text}`);

但将代码保存为literal.js，通过以下两种模块方式导入时：

1. HTML中用模块脚本引入：

<script type="module" src="literal.js"></script>

2. 从其他脚本导入：

import "literal.js";

会抛出错误：
Uncaught ReferenceError: text 未定义

原因分析 #

• 全局脚本特性：普通全局脚本里，未用var/let/const声明的变量直接赋值，会自动挂载到全局对象（浏览器环境为window），属于隐式全局变量，因此text = "It works!"能正常创建并访问。
• ES模块作用域限制：ES模块拥有独立的模块作用域，严格禁止隐式全局变量。所有变量必须先声明才能使用，直接赋值未声明的变量会触发引用错误——模块作用域内找不到该变量的声明记录。

解决办法 #

1. 显式声明变量（推荐）
   最规范的方式是先声明变量再使用：

   let text = "It works!";
   console.log(`${text}`);
   

   也可以在模板字符串内完成显式声明与使用：

   console.log(`${(let text = "It works!"), text}`);
   

2. 挂载到全局对象（不推荐，仅兼容场景用）
   如果要保留原写法的结构，可将变量挂载到全局对象：

   console.log(`${window.text = "It works!", window.text}`);
   

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