Javascript 可选链接不适用于模板文字

Question

我正在尝试将模板文字与可选链接一起应用。

type Item = {
itemId:number,
price: number};

type ItemType = {
A:Item,
B:Item
};

const data : ItemType = {
  A:{itemId:1, price:2},
  B:{itemId:2, price:3}
};

let Itemid = `data?.${variable}?.itemId`

其中 variable 是以 A 或 B 作为值的字符串。 我不确定是否同时支持可选链接和模板文字。 任何线索表示赞赏。

编辑：我收到“字符串不能用于索引类型项目时尝试使用data?.[variable]?.itemId 。我现在已经更新了类型。

已编辑：删除变量类型有助于解决上述错误消息。

Answer 1

只需将变量包装在[和]中，例如： data?.[variable]?.itemId （它称为Computed Property Names ，它是es6功能。）

完整代码：

let data = {
  A:{itemId:1, price:2},
  B:{itemId:2, price:3}
}

let variable = 'A'
let Itemid = data?.[variable]?.itemId

更多： Output 的字符串字面量是一个字符串，所以你可以使用eval(`data?.${variable}?.itemId`)来评估它的值。 （请注意，使用eval是一种不好的做法。）

但是，在您的情况下，无需使用模板文字。 只需使用[]如上所述。

Answer 2

在模板中，唯一被视为表达式的东西是${}中的东西，因此在您的情况下，您的可选链指示符是string的一部分，而不是将插入到字符串中的表达式的一部分。

使用对象键的可选链接的语法是data?.['string']?.itemId ，或者如果键存储在变量data?.[variable]?.itemId中。