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

Question

我正在学习Angular 2,我遇到了一些新事物.我使用ScratchJS扩展的Chrome浏览器来学习TypeScript.在这样做时,这就是我为反引号(`)字符串所做的:

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

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

如您所见,这是变量用户在字符串中的使用方式.但是当我在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 }将由the处理Javascript string interpolation,在渲染时,它不知道bar对象的属性是什么.

这与Angular工作方式密切相关,与此无关typescript或与此无关.${}如果您不在Angular项目中,或者不在模板中,您仍然可以使用.

例如,这样的东西应该可以工作,因为表达式在返回之前被计算,并且不依赖于模板引擎:

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