奇怪的 js eval/template 字符串行为

Question

试图在 Whosebug 中回答一个问题，我在我的 chrome 控制台中做了一些测试，发现以下情况我无法理解。

var vals = ['x','y','z'];
vals.forEach(val => { eval(`var ${val} = 1; console.log('${val} = ', ${val})`);});

javascript 如何知道我何时引用 ${val} 作为 "vals" 数组中定义的 val，以及何时引用它已将每个值存储在该数组中的值？

我的意思是，为什么它不记录：

x = x;

y = y;

z = z;

或

1 = 1;

Answer 1

模板字符串首先在您 eval 的上下文之外进行评估。所以你已经有效地完成了：

eval("var x = 1; console.log('x = ', x)");
eval("var y = 1; console.log('y = ', y)");
eval("var z = 1; console.log('z = ', z)");

这当然只是打印每个变量及其值。

像这样使用 eval 时，用 console.log 替换它会很有用，以查看实际发送给调用的字符串是什么：

var vals = ['x','y','z'];
vals.forEach(val => { console.log('eval string:', `var ${val} = 1; console.log('${val} = ', ${val})`);});

Strange js eval/template strings behaviour