如何使用变量字符串值来表示函数参数中的Javascript对象？

我真的花了上周的时间来寻找这个。我怀疑我不知道该使用什么样的搜索词，或者我问的是不可能的。不过，这似乎是一个常见的用例，所以可能是前者

我正在创建一个页面，用户可以从下拉菜单中选择他们的产品以查看软件需求。我们有大量不同的产品，它们都有相似的需求，所以我们希望在它们之间重用价值

我对JavaScript非常陌生，并且发现模板文本非常有用。也许我过度使用它们是因为它们很容易理解，但我希望在这里也使用它们

为了简化这一点，我以cups而不是软件/硬件为例

首先，我们有各种不同的属性：

const color = {
  blue: "Blue",
  green: "Green"
};

const material = {
  plastic: "Hard Plastic",
  ceramic: "Glazed Ceramic",
};

const size = {
  oz_12: "12 ounces",
  oz_16: "16 ounces",
  oz_32: "32 ounces"
};

然后每个产品都有一个变量，例如：

const simple = {
  title: "Classic Cup Options",
  colors: `${color.blue}`,
  materials: `${material.ceramic}`,
  sizes: `${size.oz_12} and ${size.oz_16}`
}

最后是一个函数，它以我想要的格式返回所有变量：

function tableTemplate(data) {
  return `<div class="cup-prod-table"><h4>${data.title}</h4>
<table class="cup-table">
<tbody>
  <tr>
    <td>Colors</td>
    <td>${data.colors}</td>
</tr>
  <tr>
    <td>Materials</td>
    <td>${data.materials}</td>
</tr>
  <tr>
    <td>Sizes</td>
    <td>${data.sizes}</td>
</tr>
</tbody>
</table>
</div>`;
};

现在，我将逐一介绍并为每个选择手动调用tableTemplate函数：

$("#demoSelect").on("change", function() {
  var str = "";
  $("#demoSelect option:selected").each(function() {
    str += $(this).val();
  });
  if (str == "simple") {
    $("#cupTables").prepend(tableTemplate(simple));
  } else if (str == "travel") {
    $("#cupTables").prepend(tableTemplate(travel));
  } else if (str == "jumbo") {
    $("#cupTables").prepend(tableTemplate(jumbo));
  }

});

以此类推，但大约有25种不同的产品

我希望能做这样的事情，但不能

$("#demoSelect").on("change", function() {
  var str = "";
  $("#demoSelect option:selected").each(function() {
    str += $(this).val();
  });
    $("#cupTables").prepend(tableTemplate(str));

});

但是，虽然我还没有找到如何做的答案，但我笨拙的搜索告诉我，我不能这样做，因为我指向的是一个简单的值，而不是一个引用常量simple={}，我想

有解决办法吗

使用模板文本以外的其他内容会更幸运吗

---

下面是一个JSFIDLE示例：

您可以在名为products的父对象下对产品进行键控，而不是将产品作为一般范围内的变量存储

const products = {
  simple: {
    // ...
  },
  travel: {
    // ...
  },
  jumbo: {
    // ...
  }
}

现在，您可以通过存储每个产品类型的密钥的名称来访问每个产品类型，该密钥下有一个字符串：

const product = products[str]
$("#cupTables").prepend(tableTemplate(product))

const product = products[str]
$("#cupTables").prepend(tableTemplate(product))