Angular中`$ {}`有什么用？

Question

我有时会在Angular项目中的TypeScript组件文件中的反引号中看到这种语法：

<div ${selector} [inDemo]="false" [config]="demoConfig">Demo Content</div>

有人可以解释一下这个特定属性${}吗？

它是如何工作的以及何时应该使用它？

Answer 1

它被称为模板文字，它是ECMASCRIPT6（ECMASCRIPT2015）的一个特征

不使用它，您可以通过以下方式将字符串与某些变量连接起来：

var a = 10, b = 15;
var string = "a equals to " + a + " and b equals to " + b;

通过使用模板litteral，它会更简单：

var a = 10, b = 15;
var string = `a equals to ${a} and b equals to ${b}`;

Answer 2

这是模板文字：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals;

用于编写多行字符串：

`string text`

`string text line 1  
string text line 2`

`string text ${expression} string text`

tag`string text ${expression} string text`