詳細ガイド
テンプレート

式構文

Angular式はJavaScriptに基づいていますが、いくつかの重要な点で異なります。このガイドでは、Angular式と標準JavaScriptの類似点と相違点を説明します。

値リテラル

Angularは、リテラル値のサブセットをJavaScriptからサポートしています。

サポートされる値リテラル

リテラルタイプ
文字列 'Hello', "World"
ブール値 true, false
数値 123, 3.14
オブジェクト {name: 'Alice'}
配列 ['Onion', 'Cheese', 'Garlic']
null null

サポートされていないリテラル

リテラルタイプ
テンプレート文字列 `Hello ${name}`
正規表現 /\d+/

グローバル

Angular式は、次のグローバルをサポートしています。

その他のJavaScriptグローバルはサポートされていません。一般的なJavaScriptグローバルには、NumberBooleanNaNInfinityparseIntなどがあります。

ローカル変数

Angularは、特定のコンテキストで式に使用できる特別なローカル変数を自動的に用意します。これらの特別な変数は、常にドル記号文字($)で始まります。

たとえば、@forブロックはループに関する情報に対応する複数のローカル変数($indexなど)を提供します。

どのような演算子がサポートされていますか?

サポートされる演算子

Angularは、標準JavaScriptの次の演算子をサポートしています。

演算子 例(複数)
加算/連結 1 + 2
減算 52 - 3
乗算 41 * 6
除算 20 / 4
余り(剰余) 17 % 5
括弧 9 * (8 + 4)
条件式(三項演算子) a > b ? true : false
論理積 &&
論理和 ||
論理否定 !
null合体演算子 const foo = null ?? 'default'
比較演算子 <, <=, >, >=, ==, ===, !==
単項否定 const y = -x
単項プラス const x = +y
プロパティアクセサ person['name'] = 'Mirabel'

Angular式は、さらに次の非標準の演算子もサポートしています。

演算子 例(複数)
パイプ {{ total | currency }}
オプショナルチェーン* someObj.someProp?.nestedProp
非nullアサーション(TypeScript) someObj!.someProp

*注意: オプショナルチェーンは、標準JavaScriptバージョンとは異なる動作をします。Angularのオプショナルチェーン演算子の左辺がnullまたはundefinedの場合、undefinedではなくnullを返します。

サポートされていない演算子

演算子 例(複数)
すべてのビット演算子 &, &=, ~, |=, ^=, etc.
代入演算子 =
オブジェクトのデストラクタリング const { name } = person
配列のデストラクタリング const [firstItem] = items
カンマ演算子 x = (x++, x)
typeof typeof 42
void void 1
in 'model' in car
instanceof car instanceof Automobile
new new Car()

式の字句コンテキスト

Angular式は、コンポーネントクラスのコンテキストと、関連するテンプレート変数、ローカル変数、およびグローバル変数のコンテキストで評価されます。

クラスメンバーを参照する場合、thisは常に暗黙的に使用されます。

宣言

一般的に、Angular式では宣言はサポートされていません。これには、以下が含まれますが、これらに限定されません。

宣言 例(複数)
変数 let label = 'abc', const item = 'apple'
関数 function myCustomFunction() { }
アロー関数 () => { }
クラス class Rectangle { }

イベントリスナー文

イベントハンドラーは、ではなくです。Angular式と同じ構文をすべてサポートしていますが、2つの重要な違いがあります。

  1. 文は代入演算子をサポートします(ただし、分割代入はサポートされていません)。
  2. 文はパイプをサポートしていません