如何在导入的JS文件中导入JS代码并求值（仅用ES6模块）

你遇到的问题本质是ES模块加载机制导致的：模块在导入阶段就会对所有顶级代码求值，content.js里的模板字符串You're ${params.firstName} ${params.lastName}在模块加载时就会尝试读取params，但此时这个变量还未定义，所以抛出引用错误。

纯JS环境下完全可以实现延迟求值，只需要把需要动态替换的内容改成函数，在需要使用时传入参数再生成最终字符串即可。

修改后的content.js：

export const appText = {
  item: {
    message: (params) => `You're ${params.firstName} ${params.lastName}.`
  }
}

然后在导入文件中调用函数并传入params：

import { appText } from "../../content.js";

export class Item {
  message;

  init(params) {
    this.message.innerHTML = appText.item.message(params);
  }
}

如果需要支持更复杂的模板场景，也可以考虑使用模板字符串的标签函数，但函数的方式最直接简单，完全满足你延迟到引用时求值的需求。

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