Aurelia 中的 ES6 字符串插值

Question

我正在尝试按照 aurelia.io 上的 "Getting Started" 部分进行操作，但在字符串内插值方面遇到了一些问题。

在第一个例子的viewmodel中，'fullName'计算出getterreturn一个字符串

return '${this.firstName} ${this.lastName}'

此值在视图（html 模板）中用作 ${fullName}。

问题是显示的不是计算出的全名，而是实际的 return 字符串。我已经尝试使用 Chrome 和 Firefox，但都没有显示正确的值。

welcome() 函数也存在同样的问题，因为它也是 return 一个字符串值。

我注意到在 Aurelia Visual Studio 示例中，return 值已更改为实际计算的字符串。

return this.firstName + " " + this.lastName;

我做错了什么？

Answer 1

我的新手错误。对于字符串插值字符串，我使用了单引号而不是反笔画。

所以正确的做法是

return `${this.firstName} ${this.lastName}`

对此感到抱歉。

Answer 2

你的回答是正确的。这实际上是 ECMAScript 6 的一个特性，而不是 Aurelia 特有的。在 ES6 中，分隔模板字符串的是 ` 字符，而不是 ' 字符。

关于Visual Studio样本，这只是输出相同结果的另一种方式。然而，这种风格在 ECMAScript 5/JavaScript 中是有效的。您还可以编写以下内容，因为它们都是等价的：

return [this.firstName, this.lastName].join(' ');

ES6 String Interpolation in Aurelia