javascript - 如何用数组值替换字符串中的多个占位符？

Question

我有一个看起来像这样的字符串:

'I want a {Crust} crust {Type} pizza'

{Crust} 和 {Type} 是字符串中的占位符，我想用字符串数组类型的实际值替换 {Crust} 和 {Type} 值。

地壳-

['Pan','Thin','Tossed']

类型-

['Veggie','Pepperoni']

预期输出应该是数组中值的所有可能组合，如下所示:

I want a Pan crust Veggie pizza
I want a Thin crust Veggie pizza
I want a Tossed crust Veggie pizza
I want a Pan crust Pepperoni pizza
I want a Thin crust Pepperoni pizza
I want a Tossed crust Pepperoni pizza

我正在寻找更通用的解决方案，因为我可以在 Crust 和 Type 数组中拥有更多值。此外，还可以有一个新的占位符，例如 {Delivery}，它将被另一个字符串数组 ['For here','To go'].

Answer 1

您可以对字符串进行替换

const crusts = ['Pan','Thin','Tossed'];

const types = ['Veggie','Pepperoni'];

const output = 'I want a {Crust} crust {Type} pizza'.replace('{Crust}', crusts[2]).replace('{Type}', types[1]);

console.log(output);

但这与 Angular 无关，通常在 Angular 中，您的组件上会有一个名为 crust 和 type 的属性，然后它们将通过绑定(bind)显示在模板中

I want a {{crust}} crust {{type}} pizza

查看此 StackBlitz https://stackblitz.com/edit/angular-prg9fx