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

Question

我正在学习 Angular2，并且遇到了一些新事物。我使用 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 的模板引擎处理，绑定 class.

中定义的 foo 属性

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

这与 Angular 的工作原理密切相关，与 typescript 或其他任何东西无关。如果您不在 Angular 项目中，或者不在模板中，您仍然可以使用 ${}。

例如，这样的事情应该有效，因为表达式在返回之前被评估，并且不依赖于模板引擎：

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

Answer 2

${} typescript代码之间显示字符串值的字符串插值。而{{}}是插值显示HTML模板中的内容。

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

Interpolation in strings made using backtick operator

string-interpolation

typescript

angular