Flutter Web开发中如何在Dart代码内调用JavaScript的eval()方法

• dart:js 库未直接导出顶层eval()函数，直接在Dart代码中调用eval()会被编译器判定为未定义方法
• Dart侧声明的变量默认不会同步到JavaScript全局作用域，即便成功调用eval，也无法读取到Dart中定义的表达式、变量对象
• 该调用方案仅适用于Flutter Web/Dart Web环境，Android、iOS、桌面等原生环境无内置JS运行时，无法使用该能力

通过dart:js提供的JS全局上下文对象context调用eval，同时提前将eval需要访问的变量挂载到全局上下文：

import 'dart:js';

void main() {
  // 待执行的判断表达式
  final expression = "person.name=='James'";
  // 表达式依赖的变量，提前挂载到JS全局上下文
  final person = {'name': 'James'};
  context['person'] = person;

  // 调用JS全局的eval方法执行表达式
  final result = context.callMethod('eval', [expression]);
  print(result); // 执行输出：true

  // 执行完成后可删除挂载的全局变量，避免污染全局作用域
  context.deleteProperty('person');
}

• 禁止直接执行未经过校验的用户输入内容，eval直接运行原生JS代码，存在代码注入安全风险
• 复杂JS交互场景不推荐全量依赖字符串拼接+eval实现，优先使用package:js或dart:js_util编写静态类型的互操作声明，可维护性和类型安全性更高
• 调用eval时如果需要传参，所有表达式依赖的变量都需要提前挂载到context对象上，否则会抛出JS侧的变量未定义错误

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