如何在JavaScript中不使用eval()动态引用导入的变量？

嘿，这两个问题其实很多前端开发者都会碰到，我来给你捋清楚解决方案：

当然可以，但得分情况说：

• 如果你用的是静态import语句（就是最常见的import ... from ...），这是编译时就会解析的，所以没法直接用变量或者字符串拼接来指定模块路径——编译器根本不知道你运行时会用什么变量。
• 但ES6提供了动态import()，它是运行时执行的，返回一个Promise，完全支持用字符串变量拼接模块路径。举个例子：

// 用变量拼接模块路径
const moduleName = 'routes';
import(`../constants/${moduleName}.js`)
  .then(module => {
    // 拿到模块里的导出内容
    console.log(module.ROUTE_TEXTS);
  })
  .catch(err => {
    console.error('模块加载出错啦:', err);
  });

这种方式在需要按需加载、或者模块路径动态生成的场景下特别好用。

你现在已经静态导入了ROUTE_TEXTS这类变量，但直接用['ROUTE_' + someDynamicVar]没生效，原因是这些变量是单独导入的，不是某个对象的属性——你得先把它们放到一个对象里，或者直接导入整个模块对象，才能通过字符串键来访问。

给你两种靠谱的方案：

方案一：手动整合到对象 #

把所有需要动态访问的变量放到一个统一的对象中，之后就可以通过属性名来动态获取：

// 先导入需要的变量
import { ROUTE_TEXTS, ROUTE_HOME, ROUTE_PROFILE } from '../constants/routes';

// 把变量映射到对象里
const routeMap = {
  ROUTE_TEXTS,
  ROUTE_HOME,
  ROUTE_PROFILE
};

// 动态获取变量
const someDynamicVar = 'TEXTS';
const result = { route: routeMap['ROUTE_' + someDynamicVar] };
// 这里result.route就是ROUTE_TEXTS的值

方案二：导入整个模块对象 #

如果导出的变量很多，手动维护routeMap太麻烦，不如直接导入整个模块作为一个对象，模块里的所有导出都会成为这个对象的属性：

// 导入整个模块，用* as 语法
import * as Routes from '../constants/routes';

// 直接通过字符串键访问
const someDynamicVar = 'TEXTS';
const result = { route: Routes['ROUTE_' + someDynamicVar] };

这种方式最省心，而且完全不需要用到eval()——毕竟eval()不仅有安全风险，还会影响代码优化。

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