Gitbook 連結: https://tigercosmos.github.io/master-js-in-30-days/

變數、資料型態以及算術運算式

變數

我們已經了解一個最簡單的程式是如何建立,以及知道電腦跑程式背後的原理了。為了正式開始學習怎麼寫一個程式,我們首先要了解變數(Variables)是怎麼一回事?

想像一下我們今天有個很簡單的工作,請你算出兩個整數 ab 的和 a + b ,我們是如何操作做計算這個過程呢?

我們可能需要動筆算一下,或甚至心算得到答案。不過假設兩個數字都超級大,你可能不會想自己算,太麻煩了!今天剛好有個神奇的盒子,上面有一個洞,我們只要把寫好數字的球兩個一起丟入洞裡,就會有寫好算好相加的數字的球跑出來。

我們來實驗一下,假設今天想算 1234 + 5678 這兩數和,我們先是將 a 代換成 1234 再將 b 代換成 5678,然後把 a 和 b 寫在球上,接著丟進盒子,馬上就有一個寫成答案的球掉出來,我們就神奇地得到答案了!

a + b 中的 ab 就稱為變數,沒錯這就是國中數學的定義!只要 ab 代不一樣的數字,就是不一樣的兩數和。剛剛使用神奇盒子算 a + b 的步驟,其實就是電腦程式運作的步驟!電腦知道今天有 ab 並且要做加法,並且得到 ab 是什麼,然後他就可以快速計算,並得到結果,運算過程是計算機結構的細節,這邊我們想像就是有個神奇盒子就好。

現在我們將問題簡化成只剩一個變數 x + 5678,如果我們想要得到答案,勢必是將數字帶進去 x,我們可以帶入隨便一個數字,讓電腦可以很快幫我們算出結果。所以現在我們的問題就變成,那要怎麼把它變成電腦可以去算的樣子?

讓我們正式開始寫程式吧!順帶一提,接下來如果一開始看不懂,非常很正常,這時候先屏住心中的一些疑惑,繼續看下去,可能就會豁然開朗了喔!

檔案:simple_variables.js

1
2
3
let x = 1234;
let output = x + 5678;
console.log(output);

我們先建立一個檔案 simple_variables.js,並用 node 執行,看看會怎樣?

1
2
$ node simple_variables.js
6912

得到了 6912 這個數字。那這個數字是怎麼來的呢?我們來仔細解釋這三行程式碼的意義。

首先 let 關鍵字是建立一個「變數」,因為我們想要計算 x + 5678,所以先 let x 建立一個變數 x,又我們要給 x 變數賦予一個值,所以這邊寫了 let x = 1234;。到這邊程式中已經有了一個 x 值是 1234

接著我們讓另外一個變數 output 當作是 x + 5678 計算結果,因為我們已經讓 x1234 了,所以等於是讓 output1234 + 5678 的結果。這邊要注意的是,在所有程式的設計上,變數一定在等號左邊,運算的式子一定在右邊。所以我們不能這樣寫:

1
x + 5678 = output // 錯的

儘管上面的式子感覺很合理,但是很遺憾的是,程式並不能這樣寫,我們只能將變數放在左邊。實際上電腦在處理 let output = x + 5678; 這行程式的時候,是先算右邊的 x + 5678 再將算出來的值賦予等號左邊的 output。這有個特別的術語,叫做左值(left value)與右值(right value)[^1]。不過在這邊我們只要先記住這個規則,寫程式的時候,變數放在左邊,運算放在右邊,並且右邊的運算會先進行,然後存在左邊的變數。

然後最後就是,我們把 output 藉由 console.log() 來印出來,console.log() 可以讓程式中的變數被顯示被印出來。在 NodeJS 中 console.log() 會把結果印出在終端機上,在瀏覽器上的話,我們可以在開發者工具中(Firefox 按下 F12 或 Cmd+Opt+k)看到輸出結果。簡而言之,就是把變數輸出來看。

變數型態

我們知道變數是什麼之後,其實變數不只可以是數字。他可以是整數、浮點數(帶小數點的數字)、字串、布林值甚至是物件。

你可以這樣想想看,現在有好多杯子,要喝茶就用茶杯,要喝酒用酒杯,要喝咖啡用馬克杯,每種飲料都必須用她專屬的杯子。在程式中,變數有他自己的型別(type),假設你一開始把 x 設為整數,他就會被放進整數的馬克杯。

白話來說的話,定義變數的型別要這樣宣告:

1
變數型別  變數名稱 = 變數的值

在強型別程式語言[^2]中,會明確界定不同馬克杯的區別,例如 C++ 中:

1
2
3
int x = 5       // 正確,設一個整數變數 x 為 5
int y = 5.5 // 錯誤!你不能在整數馬克杯中放入浮點數
float z = 5.5 // 正確,設一個浮點數變數 y 為 5.5

但是在 JS 中,所有變數被定義的時候,並不會在宣告時區分型別,一律都是用 constlet,差別在於宣告後能不能在改動值。

const 顧名思義不能再改,所以你也可以說是用來定義「常數」

1
2
const x = 5;
x = 6; // 錯誤! const 定義的變數不能改動!

而任何可以變動的數字就用 let 來定義,跑跑看下面程式碼,然後看看結果:

檔案:simple_variables_type.js

1
2
3
4
5
6
7
8
9
let num = 1234;
let floating_num = 12.34;
let string = "Hello";
let isStudent = true;

console.log(num); // 1234
console.log(floating_num); //12.34
console.log(string); // Hello
console.log(isStudent); // true

雖然印出來看不出來他是什麼型別,但你可以用 typeof 關鍵字來檢查

1
2
3
4
5
let num = 1234;
console.log(typeof num); // number

let floating_num = 12.34;
console.log(typeof num); // number

JS 中把整數跟浮點數都歸類在 number 型別中喔!

算術運算式

當我們定義變數之後,就可以對變數做操作,例如可以用四則運算,字串相加等等。

1
2
3
4
5
6
const name = "Tiger";
const birthday = 1996;
const thisYear = 2018;

const age = thisYear - birthday; // 2018 - 1996
let result = name + " is " + age + " years old." // "Tiger is 22 years old."
1
2
3
4
const hieght = 4;
const width = 6;

const area = hieght * width; // 24

注意 JS 中,數字跟字串作相加時,數字會自動被轉型成為字串。

事實上只要是不同型別的變數,相加都會被直接轉成字串表示。雖然都用 letconst 宣告,但其實本質是不一樣的,在強型別語言中是不允許這樣做,只是 JS 比較彈性,所以在衝突時會幫你都轉成字串。

參考與延伸資料

[^1]: Wiki: 值 (電腦科學)
[^2]: Wiki: 強弱型別
[^3]: W3C JS: variables