專案中，我們通常會使用插值表示式，來實現從資料來源到檢視的單向資料繫結。

一、插值表示式

插值是指將表示式嵌入到被標記的文字中。預設情況下，插值使用雙花括號 {{ 和 }} 作為定界符。

以 Angular 為例，通過插值，Angular 執行以下任務：

1. 計算所有位於雙花括號中的表示式。

2. 將這些表示式的結果轉換為字串。

3. 將這些結果融入相鄰的字串文字中。

4. 將融合後的結果賦值給元素或指令的屬性。

也就是說，位於雙花括號中的表示式都將會被轉換為字串

我們來驗證一下：

testArray = [{a: "aaa"}, {b: "bbb"}, {c: "ccc"}];
testObject = {a: "aaa", b: "bbb", c: "ccc"};
testNumber = 1;
testString = "1";
testBoolean = true;
// testBigInt = 1n;
testSymbol = Symbol('1');
testSet = new Set([1, 2])
testMap = new Map([[1, 2], [2, 3]])
 

<div>testObject: {{ testObject }}</div>
<div>testArray: {{ testArray }}</div>
<div>testNumber: {{ testNumber + 1 }}</div>
<div>testString: {{ testString + 2 }}</div>
<div>testBoolean: {{ testBoolean }}</div>
<div>testSymbol: {{ testSymbol }}</div>
<div>testSet: {{ testSet }}</div>
<div>testMap: {{ testMap }}</div>
 

由上圖可以看出 testObject 物件的輸出是 [object Object]，testNumber + 1 的輸出是 2, testSet 的輸出是 [object Set]。

以上圖片展示的結果沒有包含 testSymbol 的值，是因為報錯了：

由此可知，插值表示式確實是將表示式先計算出結果，然後轉換為字串，再融入相鄰的的字串文字中。

由於表示式是由常量、變數、函式、運算子及圓括號組成的有意義的式子。通常可將變數看作表示式的特例。於是變數也滿足插值表示式的執行方式。

但有些時候，我們需要展示一個物件，這樣的話插值表示式就顯得無能為力了，不過我們可以通過 JSON.stringify()

二、JSON.stringify()

JSON.stringify() 方法來將物件轉換為 JSON 字串。

testArray = JSON.stringify([{a: "aaa"}, {b: "bbb"}, {c: "ccc"}]);
testObject = JSON.stringify({a: "aaa", b: "bbb", c: "ccc"});

<div>testObject: {{ testObject }}</div>
<div>testArray: {{ testArray }}</div>

這樣就解決了我們的問題，將物件型別的變數也通過插值表示式顯示出來了。只是這個字串可讀性不好。

JSON.stringify() 預設返回的是單行字串，對於大型的 JSON 物件，可讀性非常差。

JSON 還可以接收兩個引數，可以接受一個數組，作為第二個引數，指定引數物件的哪些屬性需要轉成字串，第三個引數使得每個屬性單獨佔據一行，並且將每個屬性前面新增指定的字首（不超過 10個字元）。

如果我們需要講全部屬性進行轉換，可以將第二個引數設定為 null。第三個引數設定為一個數字，表示每一個屬性前面佔幾個空格。

testArray = JSON.stringify([{a: "aaa"}, {b: "bbb"}, {c: "ccc"}], null, 4);
testObject = JSON.stringify({a: "aaa", b: "bbb", c: "ccc"}, null, '\t');

<div>
    <div>testObject:</div>
    <textarea cols="30" rows="5">{{ testObject }}</textarea>
</div>
<div>
    <div>testArray:</div>
    <textarea cols="30" rows="12">{{ testArray }}</textarea>
</div>

testObject 用 \t 來格式化 JSON 字串，每一個屬性前空 8 個空格。

testArray 用數字 4 來格式化 JSON 字串，每一個屬性前空 4 個空格。

對於大型的 JSON 物件，JSON 第三個引數用來格式化 JSON 字串，將使得文字顯示得更加美觀和提高可讀性。

總結：對於頁面中要顯示物件、陣列等集合時，我們可以採取如下方式：

1. 使用 JSON.stringify() 方法將物件、陣列轉換為 JSON 字串，並將其格式化為多行顯示。
2. 使用插值表示式，繫結經 JSON.stringify() 方法轉化後的字串。
3. 將插值表示式作為 <textarea> 標籤的內容，顯示為多行文字。