在 JavaScript 中正确使用 eval

Question

我想加载不同的音频文件，点击网页中的不同文本。我使用以下 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 是否正确？有更好的方法吗？

Answer 1

如果是全局变量就用下面的

audio.src = window[this.id];

Answer 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 那样的优化。

在 JavaScript 中正确使用 eval

Correct use of eval in JavaScript

javascript

audio

jquery

eval