发现一个很有意思的问题，就是把变量与字符串或者数字拼接后类型变成了字符串，而并未执行其中的的 JavaScript 代码。

问题

<ul class="testList">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var testList = $(".testList li")
    var test0 = "变量0";
    var test1 = "变量1";
    var test2 = "变量2";
    var test3 = "变量3";
    for(var i=0;i<testList.length;i++){
      testList.eq(i).html("test" + i)
    }
</script>

输出结果：

显然这并不是想要的结果

解决 eval()函数

eval() ^[1] 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

eval() ^[2] 是全局对象的一个函数属性。

eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。不需要用 eval() 来执行一个算术表达式：因为 JavaScript 可以自动为算术表达式求值。

如果你以字符串的形式构造了算术表达式，那么可以在后面用 eval()对它求值。例如，假设你有一个变量 x，您可以通过将表达式的字符串值（例如 3 * x + 2）赋值给一个变量，然后在你的代码后面的其他地方调用 eval()，来推迟涉及 x 的表达式的求值。

如果 eval() 的参数不是字符串， eval() 会将参数原封不动地返回。在下面的例子中，String 构造器被指定，而 eval() 返回了 String 对象而不是执行字符串。

<ul class="testList">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var testList = $(".testList li")
    var test0 = "变量0";
    var test1 = "变量1";
    var test2 = "变量2";
    var test3 = "变量3";
    for(var i=0;i<testList.length;i++){
      testList.eq(i).html(eval("test" + i))
    }
</script>

输出结果：

参考

[1]:JavaScript eval() 函数:https://www.w3school.com.cn/js/jsref_eval.asp
[2]:MDN JavaScript eval() 函数:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval