JS中如何将动态变量插入对象的模板字符串值中？

你的核心问题是：JSON里的goal3是字符串形式的模板语法，而非真正的JS模板字面量，所以不会自动解析变量a。下面提供几种实用的解决方案：

方法1：字符串占位符替换（最简单） #

把JSON里的${a}改成普通占位符（比如{a}），渲染时用replace替换变量：

修改后的代码 #

var jsonData = [{
    "role": "abc",
    "nextrole": "def",
    "goals": {
        "goal1": "goal 1",
        "goal2": "goal 2",
        "goal3": "goal {a}" // 替换占位符
    }
  },
  {
    "role": "def",
    "nextrole": "ghi",
    "goals": {
        "goal1": "goal 4",
        "goal2": "goal 5",
        "goal3": "goal {a}"
    }
  },
  {
    "role": "ghi",
    "nextrole": "jkl",
    "goals": {
        "goal1": "goal 7",
        "goal2": "goal 8",
        "goal3": "goal {a}"
    }
 }];

var result2 = jsonData.find(obj => obj.role === "def");
var a = "any String";
Object.keys(result2.goals).forEach(function(key) {
  // 替换占位符为变量值
  let goalContent = result2.goals[key].replace("{a}", a);
  $('ul').append(`<li>${goalContent}</li>`);
});

方法2：动态解析模板字符串（适合多变量场景） #

如果不想修改JSON结构，可以用new Function把字符串模板转换成可执行的代码（注意：仅当字符串来源可信时使用，避免XSS风险）：

修改后的代码 #

var jsonData = [{
    "role": "abc",
    "nextrole": "def",
    "goals": {
        "goal1": "goal 1",
        "goal2": "goal 2",
        "goal3": "goal `${a}`"
    }
  },
  // ...其他对象
];

var result2 = jsonData.find(obj => obj.role === "def");
var a = "any String";
Object.keys(result2.goals).forEach(function(key) {
  let goalContent = result2.goals[key];
  // 检测是否包含模板语法，动态解析
  if (goalContent.includes('${a}')) {
    const renderGoal = new Function('a', `return \`${goalContent}\``);
    goalContent = renderGoal(a);
  }
  $('ul').append(`<li>${goalContent}</li>`);
});

方法3：用函数定义动态目标（最安全灵活） #

如果可以修改JSON结构，把动态目标改成函数，直接传入变量生成内容：

修改后的代码 #

var jsonData = [{
    "role": "abc",
    "nextrole": "def",
    "goals": {
        "goal1": "goal 1",
        "goal2": "goal 2",
        "goal3": (val) => `goal ${val}` // 定义为函数
    }
  },
  // ...其他对象
];

var result2 = jsonData.find(obj => obj.role === "def");
var a = "any String";
Object.keys(result2.goals).forEach(function(key) {
  // 判断是否为函数，是则调用传参
  let goalContent = typeof result2.goals[key] === 'function' 
    ? result2.goals[key](a) 
    : result2.goals[key];
  $('ul').append(`<li>${goalContent}</li>`);
});

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