使用反引号运算符对字符串进行插值

Question

我正在学习Angular 2，我发现了一些新东西。我使用Chrome浏览器的ScratchJS扩展来学习TypeScript。这样做时，这就是我对反引号（`）字符串所做的操作：

let user='user';
let msg=`Welcome ${user}! 
I can write multi-line string.

This is awesome!
`;
console.log(msg);

如您所见，这就是在字符串中使用变量user的方式。但是，当我在Angular 2项目中执行相同的操作时，情况有所不同（并且执行上述操作会引发错误）。对于我的虚拟Angular 2项目，我做了一个简单的组件：

import { Component} from '@angular/core';

@Component({
  selector: 'app-user',
  template: `

      Hi,  {{user}}

      I can write multi-line string.

      This is awesome!
  `,
  styles: []
})
export class UserComponent {

  user:string='John Doe';
  constructor() { 
  }
}

这有效。但是在这里，我使用的是：

{{}}

而不是：

${}

如果我使用它，它将引发错误。我知道我了解某些错误事实。但是谁能解释这是什么？

Answer 1

[{{ foo }}将由Angular的模板引擎处理，并绑定您在类中定义的foo属性。

[${ bar }将由Javascript string interpolation处理，在渲染时不知道对象的属性bar是什么。

这与Angular的工作方式密切相关，与typescript或其他任何内容均无关。如果您不在${}项目中或不在模板中，则仍可以使用Angular。

例如，类似这样的事情应该起作用，因为表达式在返回之前就已求值，并且不依赖于模板引擎：

public getUsername(): string {
    let username = 'test';
    return `Hi ${username}`;
}

Answer 2

${}是一个字符串内插，用于显示打字稿代码之间的字符串值。{{}}是插值以在HTML模板中显示内容。