[快速入門前端 37] JavaScript：變數和常數

javascript 前端新手村變數常數

Doris 2023-07-04 17:27:44 ‧ 1185 瀏覽

分享至

變數

變數是什麼

在 JavaScript 中，我們會需要暫時儲存資料以便之後提供給前端的元素使用或進行邏輯運算，這時候就會需要用變數來存放這些 data。簡而言之，變數有點像數學的代數，我們會先將某代數 x 賦予一個值，以便後續做運算，只不過在 JS 程式中有固定的特殊賦值規則。

變數的命名

在 JS 中，我們可以隨意使用英文+數字來當做變數的名稱 ( 某些具有特定意義的單字不行 )。

不能使用有意義的關鍵字，例如 if、else、let、var、for 等
只能用底線、英文、數字、＄符號組成，且不能為數字開頭
嚴格區分大小寫，test 與 Test 代表不同的變數

宣告和賦值

變數名本身是由一串無規則得文字字串組成的，為了讓程式知道我要將這組文字設為變數名，所以我們要先宣告他，在 JS 中主要有兩種宣告變數的方式 —— let 和 var。

var：較舊的宣告方式，不推薦
let：新的宣告變數方式

宣告：
利用 let 變數名; 或 var 變數名; (不推薦) 讓這串字符成為一個變數的名稱。

var abc;
let firstData;

賦值：
在宣告後我們還需要將某個值指定到變數中 (賦值)，語法為 變數 = 值。

abc = 222;
firstData = 123;

同時宣告和賦值
為了方便，也可以將宣告和賦值簡寫為同一行。

let x = 100;

完整範例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript 小練習</title>
  </head>
  <body>
    <script>
      // 先宣告後賦值
      let a; // 宣告
      a = 10; // 賦值
      console.log(a); // 輸出 a 的值到 console 中
      
      // 同時進行宣告和賦值
      let x = 5; // 宣告 x 這個變數等於 5
      let y = 4; // 宣告 y 這個變數等於 4
      console.log(x); // 輸出 x 的值到 console 中
      console.log(y); // 輸出 y 的值到 console 中
    </script>
  </body>
</html>

更新變數

變數既然稱之為變數，那就一定是可以被改變的，變數就像一個容器 (或代數)，裡面乘載著我們賦予他的值，那要怎麼將變數的值更新呢？其實與賦值的語法相同，只需要 變數 = 新的值 就可以了。

範例

let age = 18; // 將 age 宣告為 18
let year = 2023; // 將 year 宣告為 2023
console.log(age); // 輸出 18
console.log(year); // 輸出 2023

age = 19; // 將 age 改為 19
console.log(age); // 輸出 19
console.log(year); // 輸出 2023

除了可以指定更新變數的值之外，也可以設定 變數A = 變數B，變數B的值會被賦予到變數A。

範例

let age = 18; // 將 age 宣告為 18
let year = 2023; // 將 year 宣告為 2023
console.log(age); // 輸出 18
console.log(year); // 輸出 2023

age = year; // 將 year 的值放到 age 中
console.log(age); // 輸出 2023
console.log(year); // 輸出 2023

常數

常數與變數都是儲存值的容器，常數利用 const 宣告，兩者的差別在於常數宣告後就無法被修改。

範例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript 小練習</title>
  </head>
	<body>
    <script>
      const age = 18; // 將 age 宣告為 18
      age = 2023; // 會發生錯誤
    </script>
  </body>
</html>

上一篇：[快速入門前端 36] 初探 JavaScript
下一篇：[快速入門前端 38] JavaScript：資料型態 (1) 基本資料型態和複合資料型態
系列文章列表：[快速入門前端] 系列文章索引列表