變數、資料型態以及算術運算式
變數
我們已經了解一個最簡單的程式是如何建立,以及知道電腦跑程式背後的原理了。為了正式開始學習怎麼寫一個程式,我們首先要了解變數(Variables)是怎麼一回事?
想像一下我們今天有個很簡單的工作,請你算出兩個整數 a
和 b
的和 a + b
,我們是如何操作做計算這個過程呢?
我們可能需要動筆算一下,或甚至心算得到答案。不過假設兩個數字都超級大,你可能不會想自己算,太麻煩了!今天剛好有個神奇的盒子,上面有一個洞,我們只要把寫好數字的球兩個一起丟入洞裡,就會有寫好算好相加的數字的球跑出來。
我們來實驗一下,假設今天想算 1234 + 5678
這兩數和,我們先是將 a
代換成 1234
再將 b
代換成 5678
,然後把 a 和 b 寫在球上,接著丟進盒子,馬上就有一個寫成答案的球掉出來,我們就神奇地得到答案了!
a + b
中的 a
和 b
就稱為變數,沒錯這就是國中數學的定義!只要 a
和 b
代不一樣的數字,就是不一樣的兩數和。剛剛使用神奇盒子算 a + b
的步驟,其實就是電腦程式運作的步驟!電腦知道今天有 a
和 b
並且要做加法,並且得到 a
和 b
是什麼,然後他就可以快速計算,並得到結果,運算過程是計算機結構的細節,這邊我們想像就是有個神奇盒子就好。
現在我們將問題簡化成只剩一個變數 x + 5678
,如果我們想要得到答案,勢必是將數字帶進去 x
,我們可以帶入隨便一個數字,讓電腦可以很快幫我們算出結果。所以現在我們的問題就變成,那要怎麼把它變成電腦可以去算的樣子?
讓我們正式開始寫程式吧!順帶一提,接下來如果一開始看不懂,非常很正常,這時候先屏住心中的一些疑惑,繼續看下去,可能就會豁然開朗了喔!
simple_variables.js
let x = 1234;
let output = x + 5678;
console.log(output);
我們先建立一個檔案 simple_variables.js
,並用 node 執行,看看會怎樣?
$ node simple_variables.js
6912
得到了 6912
這個數字。那這個數字是怎麼來的呢?我們來仔細解釋這三行程式碼的意義。
首先 let
關鍵字是建立一個「變數」,因為我們想要計算 x + 5678
,所以先 let x
建立一個變數 x
,又我們要給 x
變數賦予一個值,所以這邊寫了 let x = 1234;
。到這邊程式中已經有了一個 x
值是 1234
。
接著我們讓另外一個變數 output
當作是 x + 5678
計算結果,因為我們已經讓 x
是 1234
了,所以等於是讓 output
為 1234 + 5678
的結果。這邊要注意的是,在所有程式的設計上,變數一定在等號左邊,運算的式子一定在右邊。所以我們不能這樣寫:
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
設為整數,他就會被放進整數的馬克杯。
白話來說的話,定義變數的型別要這樣宣告:
變數型別 變數名稱 = 變數的值
在強型別程式語言2中,會明確界定不同馬克杯的區別,例如 C++ 中:
int x = 5 // 正確,設一個整數變數 x 為 5
int y = 5.5 // 錯誤!你不能在整數馬克杯中放入浮點數
float z = 5.5 // 正確,設一個浮點數變數 y 為 5.5
但是在 JS 中,所有變數被定義的時候,並不會在宣告時區分型別,一律都是用 const
或 let
,差別在於宣告後能不能在改動值。
const
顧名思義不能再改,所以你也可以說是用來定義「常數」
const x = 5;
x = 6; // 錯誤! const 定義的變數不能改動!
而任何可以變動的數字就用 let
來定義,跑跑看下面程式碼,然後看看結果:
simple_variables_type.js
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
關鍵字來檢查
let num = 1234;
console.log(typeof num); // number
let floating_num = 12.34;
console.log(typeof num); // number
JS 中把整數跟浮點數都歸類在 number
型別中喔!
算術運算式
當我們定義變數之後,就可以對變數做操作,例如可以用四則運算,字串相加等等。
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."
const hieght = 4;
const width = 6;
const area = hieght * width; // 24
注意 JS 中,數字跟字串作相加時,數字會自動被轉型成為字串。
事實上只要是不同型別的變數,相加都會被直接轉成字串表示。雖然都用 let
或 const
宣告,但其實本質是不一樣的,在強型別語言中是不允許這樣做,只是 JS 比較彈性,所以在衝突時會幫你都轉成字串。
參考與延伸資料
1. Wiki: 值 (電腦科學) ↩
2. Wiki: 強弱型別 ↩
3. W3C JS: variables ↩