跳到主要內容
Cypher's Practical Coding
正在準備工作環境...

變數與資料型態

變數就是「有名字的容器」,用來存放資料。

想像你在 Excel 裡把某個值存在 A1 儲存格,之後可以用 A1 來引用它。 JavaScript 的變數也一樣——取個名字,把值存進去,之後隨時可以用。

宣告變數:let 和 const

JavaScript 有兩種主要的宣告方式:

關鍵字用途能不能改值?
let宣告一個「可以改的」變數可以
const宣告一個「不能改的」常數不行

let 宣告的變數可以更新:

小提醒:不確定要用哪個?預設用 const,需要改值時才用 let

三種基本資料型態

1. 字串(String)——文字

用引號(單引號或雙引號都可以)包起來的內容就是字串:

字串可以用 + 串接:

2. 數字(Number)——數值

不需要引號,直接寫數字就好:

3. 布林(Boolean)——是或否

只有兩個值:true(是)和 false(否)。

在電商系統中,布林值非常常見:

  • 商品是否上架? true / false
  • 客戶是否 VIP? true / false
  • 訂單是否已出貨? true / false

樣板字串(Template Literal)

用反引號和 ${} 可以更方便地組合文字和變數:

這比用 + 串接更好讀:

AI 協作:學了這個,跟 AI 怎麼配合?

AI 寫的 JavaScript 裡充滿 let、const、各種型態。你要能看懂「這個值是什麼」。

你的人類優勢:

  • 你能判斷變數存的值是否正確(價格怎麼變成字串了?)
  • 你能要求 AI 用更好的變數名稱,讓程式更好讀

可以這樣跟 AI 說:

幫我宣告這些變數:商品名稱「經典白T」、價格 590、庫存 30、是否上架 true。用 const 或 let 分別處理。

練習題

互動示範

DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
DEMO 4可以修改程式碼試玩
DEMO 5可以修改程式碼試玩
DEMO 6可以修改程式碼試玩
DEMO 7可以修改程式碼試玩
DEMO 8可以修改程式碼試玩
DEMO 9可以修改程式碼試玩

挑戰任務

Task 1

請宣告一個變數 productName,值為 "防曬乳",然後用 console.log 印出來。

Task 2

請宣告 price = 1200 和 qty = 3,用 console.log 印出總金額(price * qty)。

Task 3

請宣告 brand = "91APP" 和 product = "智能推薦",用樣板字串印出「91APP 推出 智能推薦」。

BackNext Lesson →