JavaScript 變數

2025 iThome 鐵人賽

DAY 7

Modern Web

30天絕望倒數JavaScript系列第 7 篇

17th鐵人賽

ysljs

團隊nutc imac

2025-09-21 21:11:12

21 瀏覽

分享至

JavaScript 變數 (variable) 是用來儲存資料的容器。它們讓你能在程式中重複使用、修改和操作資料。

1.宣告變數

JavaScript 有4種宣告方式：

var name = "Tom";   // 舊方式，不建議
自動                 // 舊方式，不建議
let age = 20;       // 區塊作用域
const PI = 3.14;    // 常數 (不可重新指定)

差異：

函式作用域 (function scope)
允許重複宣告
存在「變數提升 hoisting」問題

區塊作用域 (block scope: { ... })
不允許重複宣告
取代大部分 var 用途

const

區塊作用域
必須馬上賦值
不能重新指定，不過物件和陣列的內容仍可改變

賦值與重新指定

let x = 10;
x = 20; // OK

const y = 30;
// y = 40; ❌ 錯誤 (不能重新指定)

資料型別 (Data Types)
變數可存不同型別：
原始型別 (Primitive types)

String: "Hello"
Number: 123, 3.14
Boolean: true, false
Null: null
Undefined: undefined
Symbol: Symbol("id")
BigInt: 123n

物件型別 (Object types)

Object: { key: "value" }
Array: [1, 2, 3]
Function: function() { ... }

命名規則

只能用字母、數字、底線 _、錢字號 $
不能用數字開頭
區分大小寫 (name 和 Name 不一樣)
建議用小駝峰命名法 (camelCase

let userName = "Tom";
let totalScore = 100;

範例

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let carName = "紅姊";

document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

image

<!DOCTYPE html>
<html>
<body>


<p id="demo"></p>

<script>
const price1 = 1234;
const price2 = 5678;
let total = price1 + price2;

document.getElementById("demo").innerHTML = "The total is: " + total;
</script>

</body>
</html>

image