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`

变量是一个字符串，其值为A或B。

我不确定可选链和模板字面量是否可以一起使用。任何线索都将不胜感激。

已编辑：尝试使用data?.[variable]?.itemId时收到“字符串不能用于类型Item的索引”错误消息。我现在已更新了类型。

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

- Dy4

Answer 1

只需将变量包装在[和]之间，例如：data?.[variable]?.itemId（这被称为计算属性名，它是一个es6功能）。

完整代码：

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

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

更多： 字符串字面量的输出是一个字符串，所以您可以使用eval(`data?.${variable}?.itemId`)来评估其值。（请注意，使用eval是一种不好的实践。）

然而，在您的情况下，没有必要使用模板字面量。只需如上所述使用[]即可。

- yaya

---

你在一个模板字面量中又嵌套了一个模板字面量，这是行不通的。我认为没有一种有意义的方式可以实现 OP 想要的模板字面量功能。 - undefined

Answer 2

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

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

- Adam Coster