web-dev-qa-db-ja.com

バックティック演算子を使用して作成された文字列の補間

私は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() { 
  }
}

これは機能します。しかし、ここでは、以下を使用して文字列補間を使用しています。

{{}}

の代わりに：

${}

そして、それを使用すると、エラーがスローされます。私はいくつかの事実を誤解していることを知っています。しかし、誰がそれを説明できますか？

angulartypescriptstring-interpolation
9
Lonewolf

{{ foo }}はAngularのテンプレートエンジンによって処理され、クラスで定義されているfooプロパティをバインドします。

${ bar }はJavascript string interpolationによって処理され、レンダリング中はオブジェクトのプロパティbarが何であるかを知る手がかりがありません。

これはAngularの動作に密接に関連しているものであり、TypeScriptやその他には関係ありません。 Angularプロジェクトに参加していない場合、またはテンプレートに参加していない場合でも、${}を使用できます。

たとえば、式は返される前に評価され、テンプレートエンジンに依存しないため、次のようなものが機能するはずです。

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

${} TypeScriptコード間の文字列の値を表示するための文字列補間です。そして{{}}は、HTMLテンプレートでコンテンツを表示するための補間です。

0
Sushma Tiwari