使用ES6 template literals：

Question

此问题之前已被问过，我想为其他人创建一个（可能）更简单的版本，以便（或许）更容易理解。

我想要做的是将字符串与变量中的数据（字符串）组合以创建变量名称。我想它会被称为动态变量？

在这个例子中，我想将一个类和文本添加到div ..

<div class="time fa"></div>

..基于我从json文件中获取的数据更改。

var timetain = 10;
var timebus = 20;
var icontrain = 'fa-train';
var iconbus = 'fa-bus';
var type = 'bus'; // this string comes from a json file, it will either be train or bus

所以我想在time变量的数据中添加单词type，以输出timetrain或timebus

的数据

$('.time').text('Travel by bus will take |'time'|+|type| minutes');
$('.time').addClass(|'icon'|+|type|));

我认为另一种措辞问题是＆＃34;如何将变量的数据与字符串组合以使用Javascript从第三个变量获取数据？＆＃34;

Answer 1

为什么不制作时代的关联数组呢？

time = {'bus': 20, 'train': 10}

等？而不仅仅是time[type]访问它。这比你想做的更安全（你必须依赖eval），这似乎有点过分了。

Answer 2

使用ES6 template literals：

var time = "30",
    typesArr = ["bus", "train", "foot"],
    type = typesArr[ Math.random()*typesArr.length|0 ]; // pick random array item

// mix values with strings:
document.write(   `Travel by ${type} will take ${time} minutes`   );

基本上你不能在javascript中构造变量名，除非它是Object的Key，所以你必须将键存储在某个对象中以便访问它们，但在你的情况下它更容易：

$('.time').addClass('icon fa-' + type); // example => 'icon fa-train'

但是，如果您真的想要动态构建密钥，您可以这样做：

var types = {
    train : "fa-train",
    bus : "fa-bus"
};

var whatever = "bus";
var type = types[whatever];  // "fa-bus"

Answer 3

Nicht so @Hastig，lieber ordentlich machen。

不使用Eval的更好解决方案：

现在大多数编程语言都支持数据结构来“组合”在一起的变量。它被称为对象。在多个变量上使用Objects时，我无法提出一个缺点。这种方法比使用eval()的尝试更快（一点点）。

var configByType = {
  "train": {
  label: "train",
    time: 10,
    icon: "fa-train"
  },

  "bus": {
    label: "bus",
    time: 20,
    icon: "fa-bus"
  }
}

function travel(type){
  //because creating and adding a new `span` is simpler 
  //than checking wich classes to remove on `.time.fa`
  var $span = $('.time').html('<span>').children();
  
  if(type in configByType){
    let config = configByType[type];
    $span.addClass(config.icon)
      .text('Travel by '+ config.label +' will take ' + config.time + ' minutes')
  }else{
    
    $span.text('unsupported type: ' + type);
  }
}

$('#update').click(function(){
  var types = ["car", "bus", "train", "plane"];

  var randomType = types[Math.floor(Math.random() * types.length)];
  travel(randomType)
});

travel('bus');

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time fa"></div>
<br>
<input id="update" type="button" value="update" />

Answer 4

使用评估的解决方案

eval('string' + variableName)

已应用于提供的代码

＆＃13;

var timetain = 10;
var timebus = 20;
var icontrain = 'fa-train';
var iconbus = 'fa-bus';

var type = 'bus'; // this data (string) comes from a json file, it will either be train or bus

$('.time').text('Travel by bus will take ' + eval('time' + type) + ' minutes');
$('.time').addClass(eval('icon' + type));

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time fa"></div>

＆＃13;

注意

在使用此解决方案之前，请务必阅读有关criticisms of using eval
的更多信息
此解决方案可以解决问题。我认为投票是因为我指出的批评，如果计划得当，还有更好的办法，但我们永远不会知道，因为没有人愿意解释自己。

我需要简单的eval方式，因为我正在为一个简单的游戏应用程序组合一个复杂的不同json文件比较网络，需要一个快速简单的变量变量＆＃39;，php风格的方法作为占位符代码，直到我能够更好地思考一切。

在更高级的版本中，我使用的是像其他答案中推荐的对象和数组，但我没有使用eval作为临时的脚手架来思考。

<强>小提琴

https://jsfiddle.net/Hastig/o169ja8w/

如何使用Javascript或jQuery将两个字符串连接成变量名？

4 个答案:

使用ES6 template literals：

不使用Eval的更好解决方案：