以下是您提供的英文文本翻译成繁體中文的內容：

AngularJS - Expressions

# AngularJS 表達式：初學者的全面指南

你好，未來的編程超級巨星！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 表達式的世界。別擔心你對編程還是新手——我將成為你的友好指南，我們將一步步探索這個主題。到了這個教學的結尾，你將能像專業人士一樣在 AngularJS 中表達自己！

## 什麼是 AngularJS 表達式？

在我們深入細節之前，讓我們先了解 AngularJS 表達式是什麼。可以把它们想象成 AngularJS 評估並然後顯示的小段代碼。它們就像你編碼料理中的調味料——為你的網頁添加了風味和功能！

AngularJS 表達式寫在雙花括號內：`{{ expression }}`。它們也可以在指令中使用（我們稍後會學習這些）使用 `ng-bind="expression"`。

現在，讓我們探索不同類型的表達式！

## 使用數字

讓我們從簡單的東西開始——數字。AngularJS 表達式可以像計算器一樣進行算術運算。讓我們看一些例子：

```html
<div ng-app="">
  <p>5 + 5 = {{ 5 + 5 }}</p>
  <p>10 - 3 = {{ 10 - 3 }}</p>
  <p>4 * 4 = {{ 4 * 4 }}</p>
  <p>20 / 5 = {{ 20 / 5 }}</p>
</div>

當你運行這段代碼時，AngularJS 將評估這些表達式並顯示：

這不是很酷嗎？就像在你的 HTML 中有一個迷你計算器！

使用字符串

接下來，讓我們來討論字符串。在編程中，字符串就是一種花哨的說法，意思是“文本”。AngularJS 也可以處理字符串。看看這個：

<div ng-app="" ng-init="firstName='John'; lastName='Doe'">
  <p>名字: {{ firstName }}</p>
  <p>姓氏: {{ lastName }}</p>
  <p>全名: {{ firstName + " " + lastName }}</p>
</div>

這裡發生了什麼：

我們使用 ng-init 為 firstName 和 lastName 設置初始值。
然後我們使用表達式來顯示這些值。
在最後一行，我們將第一名和姓氏與一個空格連接起來。

輸出將會是：

名字: John
姓氏: Doe
全名: John Doe

看見我們如何操作字符串了嗎？就像是在文字上當木偶戲師！

使用對象

現在，讓我們升級一下，討論對象。在編程中，對象就像是可以存放不同類型數據的容器。這是我們如何在 AngularJS 表達式中使用對象：

<div ng-app="" ng-init="person={firstName:'John', lastName:'Doe', age:30}">
  <p>名字: {{ person.firstName }}</p>
  <p>姓氏: {{ person.lastName }}</p>
  <p>年齡: {{ person.age }}</p>
</div>

在這個例子中：

我們創建了一個名為 person 的對象，它有 firstName、lastName 和 age 屬性。
我們使用點語法 (person.propertyName) 來訪問這些屬性。

輸出將會是：

名字: John
姓氏: Doe
年齡: 30

對象在你想將相關數據組合在一起時非常有用。把它們當作數字文件櫃！

使用數組

數組在編程中就像列表。當你想存儲多個項目時，它們非常有用。讓我們看看如何在 AngularJS 表達式中使用數組：

<div ng-app="" ng-init="fruits=['Apple', 'Banana', 'Orange', 'Mango']">
  <p>第一個水果: {{ fruits[0] }}</p>
  <p>第二個水果: {{ fruits[1] }}</p>
  <p>列表長度: {{ fruits.length }}</p>
</div>

這裡發生了什麼：

我們創建了一個名為 fruits 的數組，其中有四個項目。
我們使用索引（記住，在編程中，我們從 0 開始計數）來訪問數組的項目。
我們也可以使用內置屬性，如 length 來獲取關於數組的信息。

輸出將會是：

第一個水果: Apple
第二個水果: Banana
列表長度: 4

數組就像你的數字購物單——容易創建和管理！

輸出

現在我們已經涵蓋了不同類型的表達式，讓我們來討論輸出。AngularJS 表達式通常用於將數據輸出到 HTML。讓我們將所有內容整合在一起，看一個綜合性的例子：

<div ng-app="" ng-init="user={name:'John Doe', age:30}; colors=['Red', 'Green', 'Blue']">
  <h2>用戶信息</h2>
  <p>名字: {{ user.name }}</p>
  <p>年齡: {{ user.age }}</p>
  <p>是否成年: {{ user.age >= 18 }}</p>

  <h2>顏色</h2>
  <p>第一個顏色: {{ colors[0] }}</p>
  <p>顏色數量: {{ colors.length }}</p>

  <h2>計算</h2>
  <p>5 * 10 = {{ 5 * 10 }}</p>
  <p>用戶五年後的年齡: {{ user.age + 5 }}</p>
</div>

這個例子展示了：

使用對象 user 的對象
使用數組 colors 的數組
布爾表達式 (user.age >= 18)
算術運算
結合不同類型的表達式

AngularJS 表達式的美妙之處在於它們如何無縫地集成到你的 HTML 中，使你的頁面變得動態和互動！

方法表

這裡是一個總結我們使用的一些常用方法和屬性的表格：

方法/屬性	描述	示例
+	加法運算符	`{{ 5 + 5 }}`
-	減法運算符	`{{ 10 - 3 }}`
*	乘法運算符	`{{ 4 * 4 }}`
/	除法運算符	`{{ 20 / 5 }}`
+ (對字符串)	字符串連接	`{{ "Hello" + " " + "World" }}`
. (點語法)	訪問對象屬性	`{{ person.name }}`
[] (括號語法)	訪問數組元素	`{{ fruits[0] }}`
length	獲取數組長度的屬性	`{{ fruits.length }}`
>=	大於或等於運算符	`{{ age >= 18 }}`

那就這樣了，各位！我們一起穿越了 AngularJS 表達式的領地，從簡單的數字到複雜的對象和數組。記住，熟能生巧，所以不要害怕嘗試這些概念。開心編程，願你的表達式總是評估為出色！

Credits: Image by storyset