你有沒有做過填空題？
「我叫 ______，今年 ______ 歲。」
把空格填上答案，一個句子就完成了。
其實寫程式的世界裡，也有一模一樣的事情在發生。
這篇文章會用最生活化的方式，帶你搞懂「模板語法」到底是什麼，為什麼工程師離不開它，以及為什麼你只要學會這個觀念，未來學任何新技術都會快很多。
如果沒有 Template，工程師的日子有多崩潰？
先來想像一個場景。
假設你經營一個網站，今天有 100 個新會員註冊，你要寄歡迎信給每一位。
信的內容長這樣：
你好，小明！歡迎加入我們的網站。如果沒有模板，你得手動把「小明」改成「小華」，再改成「阿美」……改 100 次。
光想就很崩潰對吧？
聰明的工程師當然不會這樣做。
他們會先寫好一份「範本」：
你好，[名字]！歡迎加入我們的網站。然後讓電腦自動去名單裡抓每個人的名字，一個一個填進 [名字] 這個空格裡。
100 封信，一秒搞定。
這個 [名字] 就是模板語法最早的雛形。
Template Syntax（模板語法）是什麼？一句話解釋
模板語法，就是一套事先約定好的符號，用來告訴電腦：「這個位置先空著，等一下把資料填進來。」
打個比方，你可以把它想成一張「申請表」。
表格上那些空格（姓名欄、地址欄）就是模板語法。
你填進去的內容（王小明、台北市）就是資料。
表格的「格式」不會變，但每個人填進去的「內容」都不一樣。
這個概念不限定在某一種技術上。
寄 Email 時，信件範本裡的 [收件人名稱] 是模板語法。
產生 PDF 報表時，報表格式裡的 {{ 總金額 }} 也是模板語法。
而在網頁開發中，它最常見的用途是讓「靜態的 HTML」和「動態的資料」結合在一起。
什麼意思呢？
假設你寫了一段 HTML：
<p>你好，小明！你的購物車有 3 件商品。</p>這段程式碼永遠只會顯示「小明」和「3 件」，不管今天是誰登入、買了幾樣東西。
這就是所謂的「靜態」——寫死的、不會變的。
但實際的網站不可能這樣運作，因為每個使用者的名稱不同，購物車裡的商品數量也隨時在變。
這時候如果用模板語法來寫：
<p>你好，{{ 使用者名稱 }}！你的購物車有 {{ 商品數量 }} 件商品。</p>電腦就會根據當下登入的人，自動把正確的資料填進去。
小明看到的是「你好，小明！」，小華看到的是「你好，小華！」。
模板語法就是這樣扮演橋樑的角色——讓固定不變的網頁結構，能夠搭配隨時在變的資料一起運作。
所以記住：模板語法是一個通用的概念，網頁只是它最常被應用的場景之一。
Template Syntax 三大核心規則：插值、條件、迴圈
不管你未來學的是 Vue、React、還是後端的 Python，以下三種規則幾乎到處都會出現。
名稱可能不同，但背後的邏輯完全一樣。
規則一：把資料印出來（變數插值）
這是最基本的填空，技術上叫做「變數插值」（Interpolation）。
聽起來很專業，但意思很簡單：把變數的值「插」進模板的指定位置裡。
先用白話文來理解這個概念：
資料：名字 = "小明"
模板：你好，{{ 名字 }}！
結果：你好，小明！看到 {{ }} 就把資料塞進去，就這麼單純。
如果把名字換成「小華」，結果就變成「你好，小華！」。
模板不用改，只要換資料就好。
那實際的程式碼長什麼樣子呢？來看兩個不同框架的寫法：
Vue（前端 JavaScript 框架）：
// 資料
const user = {
name: "小明"
}<!-- 模板 -->
<p>你好，{{ user.name }}！</p><!-- 結果 -->
<p>你好，小明！</p>Django（後端 Python 框架）：
# 資料
user = {
"name": "小明"
}<!-- 模板 -->
<p>你好，{{ user.name }}！</p><!-- 結果 -->
<p>你好，小明！</p>有沒有發現？兩個框架的模板幾乎長得一模一樣，都是用 {{ }} 來填資料。
語言不同，但填空的邏輯完全相同。
規則二：決定要不要顯示（條件判斷）
有時候我們不只是填資料，還需要「看情況」決定要顯示什麼。
一樣先用白話文理解：
資料：性別 = "男生"
如果 性別 是 "男生"：
顯示 → 嗨，帥哥！
否則：
顯示 → 嗨，美女！
結果：嗨，帥哥！電腦會根據資料的內容，自動決定畫面上該出現哪一段文字。
這就是條件判斷——讓畫面根據不同情況，顯示不同內容。
實際的程式碼長這樣，一樣看兩個框架：
Vue（前端 JavaScript 框架）：
// 資料
const user = {
gender: "男生"
}<!-- 模板 -->
<p v-if="user.gender === '男生'">嗨，帥哥！</p>
<p v-else>嗨，美女！</p><!-- 結果 -->
<p>嗨，帥哥！</p>Django（後端 Python 框架）：
# 資料
user = {
"gender": "男生"
}<!-- 模板 -->
{% if user.gender == "男生" %}
<p>嗨，帥哥！</p>
{% else %}
<p>嗨，美女！</p>
{% endif %}<!-- 結果 -->
<p>嗨，帥哥！</p>Vue 用 v-if / v-else，Django 用 {% if %} / {% else %}。
符號不同，但做的事情一模一樣：看資料決定顯示哪一段。
規則三：重複出現（列表循環）
如果你有一份名單，需要把每個人的名字都列出來，怎麼辦？
先用白話文理解：
資料：名單 = ["小明", "小華", "阿美"]
對名單裡的每一個人，重複執行：
顯示 → 你好，{{ 這個人的名字 }}！
結果：
你好，小明！
你好，小華！
你好，阿美！不管名單裡有 3 個人還是 300 個人，模板只要寫一次。
這就是列表循環的威力。
實際的程式碼長這樣，一樣看兩個框架：
Vue（前端 JavaScript 框架）：
// 資料
const friends = ["小明", "小華", "阿美"]<!-- 模板 -->
<p v-for="friend in friends">你好，{{ friend }}！</p><!-- 結果 -->
<p>你好，小明！</p>
<p>你好，小華！</p>
<p>你好，阿美！</p>Django（後端 Python 框架）：
# 資料
friends = ["小明", "小華", "阿美"]<!-- 模板 -->
{% for friend in friends %}
<p>你好，{{ friend }}！</p>
{% endfor %}<!-- 結果 -->
<p>你好，小明！</p>
<p>你好，小華！</p>
<p>你好，阿美！</p>Vue 用 v-for，Django 用 {% for %}。
寫法不同，但結果完全一樣：把名單裡的每個人都跑一遍。
誰負責把資料填進去？認識 Template Engine（模板引擎）
前面我們一直說「電腦會自動把資料塞進模板裡」，但這件事不是憑空發生的。
背後有一個專門的程式在負責處理這件事，它叫做「模板引擎」（Template Engine）。
你可以把它想像成一座「加工廠」。
這座加工廠需要兩種原料：
原料 A：模板——就是那份留了空格的 HTML。
原料 B：資料——從資料庫或其他地方抓出來的內容。
加工廠的工作流程很簡單：
模板引擎看到 {{ }} 這種符號，就知道要把對應的資料塞進去。
處理完之後，它就會吐出一個完整的、漂亮的網頁。
這裡有一個很重要的觀念：幾乎每種程式語言或框架，都有搭配的模板引擎。
有些是框架內建的，裝好就能用（例如 Vue、Django）。
有些則需要另外安裝搭配（例如 Python 的 Flask 框架，通常會搭配 Jinja2 這個模板引擎）。
但不管是內建還是另外裝的，它們的工作方式都一樣：拿模板、拿資料、合在一起、產出結果。
Template Syntax 不是 Vue 專屬的？跨框架比較
很多初學者第一次接觸模板語法，是在學 Vue 的時候。
所以很容易以為 {{ }} 和 v-for 是 Vue 發明的、Vue 專屬的東西。
但事實上，模板語法是一個通用的概念，存在於幾乎所有的程式語言和框架中。
你在 Vue 看到的 v-for，在 Python 的 Django 裡叫做 {% for %}。
你在 Vue 看到的 v-if，在 PHP 的 Blade 裡叫做 @if。
符號不同，但做的事情完全一樣。
下面這張表可以讓你一目了然：
看出來了嗎？
每一行的「功能」都一樣，只是「符號寫法」不同而已。
這就像全世界的紅綠燈，設計可能不一樣，但紅燈停、綠燈行的規則是一樣的。
所以，真正重要的不是記住某個框架的語法怎麼寫。
真正重要的是理解背後的邏輯：「結構」和「資料」要分開處理。
什麼是「結構」？就是那些不會變的部分——HTML 標籤、排版、固定的文字，像是「你好，」和「！」。
什麼是「資料」？就是那些會變的部分——使用者名稱、商品價格、留言內容，每次都不一樣。
如果你把兩者混在一起寫死，每次資料一變，你就得改程式碼。
但如果你把結構和資料分開，結構只要寫一次，資料隨時抽換就好，程式碼完全不用動。
這就是模板語法存在的根本原因：讓「不變的結構」和「會變的資料」各自獨立，再透過模板引擎組裝在一起。
一旦你搞懂了這個邏輯，未來不管遇到什麼新框架、新工具，你都只是在學「不同廠商的符號」而已。
總結：學會用「模板化」的方式思考
讓我們快速回顧一下今天學到的東西。
模板語法的本質，就是一套約定好的符號，讓靜態的 HTML 和動態的資料可以結合在一起。
三個核心規則，不管在哪個框架都通用：
第一，印出資料——把變數的值填進空格裡。
第二，條件判斷——根據資料決定要不要顯示某段內容。
第三，列表循環——讓同一段模板重複套用到一組資料上。
模板引擎就是那座負責「組裝」的加工廠，每種語言都有自己的版本。
但最重要的收穫，其實不只是學會一種語法。
而是學會一種思考方式：把「不變的東西」和「會變的東西」分開處理。
模板是不變的——結構、格式、排版。
資料是會變的——名字、價格、日期。
當你開始用這種方式看待問題，你會發現它不只適用在寫程式上。
做簡報、寫文件、設計表單，到處都能用到「模板化思考」。
下次當你看到 {{ }} 或 v-for 這些符號時，不要害怕。
它們只是填空題的另一種長相而已。