在 JavaScript 中正确使用 eval答案

【问题标题】：Correct use of eval in JavaScript在 JavaScript 中正确使用 eval
【发布时间】：2017-10-24 14:51:44
【问题描述】：

我想加载不同的音频文件，点击网页中的不同文本。我使用以下 jQuery 函数：

var audio = document.createElement('audio');      
$(".text_sample").on("click", function() {
  audio.src = eval(this.id);
  audio.play();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="text_sample" id="a_music">music</a><br />
<a class="text_sample" id="a_weather">weather</a>

您认为在这种情况下使用eval 是否正确？有更好的方法吗？

【问题讨论】：

嗯？但是a_music 的评估结果是什么？这段代码应该只是抛出一个“未捕获的 ReferenceError”
@JosephMarikle 实际上，如果页面上有一个带有 id 的元素，浏览器（可能不是全部？）将向窗口对象添加一个变量。所以 window.a_music 将被定义。仍然不是正确的方法，但除非您处于严格模式，否则它不会引发错误
@NicholasTower 啊！是的你是对的。我完全忘记了这是一件事。
抱歉，我以 dup 的身份关闭，但意识到您要求获取变量，而另一个问题是设置变量。无论如何，您可能会从这个问题中找到有趣的信息：stackoverflow.com/questions/26019658/…

标签： javascript jquery audio eval

【解决方案1】：

如果是全局变量，请使用以下内容。

audio.src = window[this.id];

【讨论】：

感谢您的回答，您能解释一下为什么这样更好吗？
原因是大多数专家认为eval 是一种糟糕的编码习惯，在您的情况下并不是真正需要的。 eval(this.id) 建议存在名称为 a_music 和 a_weather 的变量。所有的全局变量都可以在window 对象中找到。因此，我们可以简单地使用 structure 引用来获取价值，而不是 eval。

【解决方案2】：

所以看起来你有一些与元素ID对应的变量，你想使用元素ID来获取变量的值。

虽然eval 有效，但我不会这样做。没有太大的安全问题，因为任何经过评估的代码只会影响用户自己的机器，但更简洁的方法是使用 data- 属性。

  <a class="text_sample" id="a_music" data-src="/foo.wav">music</a><br />
  <a class="text_sample" id="a_weather" data-src="/bar.wav">weather</a>

那么就完全不需要依赖局部变量了。而是使用元素上的dataset 对象来获取src。

  var audio = document.createElement('audio');      
  $(".text_sample").on("click", function() {
      audio.src = this.dataset.src;
      audio.play();
  });

这也避免了像 eval 那样杀死优化。

【讨论】：