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中。