iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

從零開始的JS學習之路系列 第 5

[Day05] 運算式與運算子

運算式(Expression):最大的特性是產生一個「值」。像是在呼叫 function 時的參數(arguments),或透過 = 賦值時,在 =「右側」都屬於運算式的部分。
在運算式中如加減乘除都屬於運算子的一種。 -- 008 天

接著談談在這章所理解的部分,因運算式有很多,所以舉例較常見的 + - * / 四則運算。

加號+

當數字遇到數字是很一般的狀況,但如果是數字遇到字串會發生自動轉型,當加號 + 兩側其中一方為字串,加號 + 會將兩者是為字串連接在一起。

100 + 123 // 這是數字加數字等於 223 
100 + "123" // "100123" 數字遇到字串轉型成字串

來看看其他的型別會怎麼轉

100 + undefined // NaN,undefined 被嘗試轉成數字變成 NaN
"100" + undefined // "100undefined"
100 + true // 101,true 轉成數字值是 1
100 + false // 100,false 轉成數字值是 0
"100" + false // "100false",false 被轉成字串
100 + null // 100,null 被轉成數字是 0

舉例數字及字串混用的算式:

var num1 = 2;
var num2 = 3;

var str1 = "2 + 3 等於多少? 答:" + num1 + num2;
console.log(str1);
2 + 3 等於多少? 答:23

因為運算式的計算是由左而右先乘除後加減,所以要加上括號才會是我們想要的結果

var str1 = "2 + 3 等於多少? 答:" + (num1 + num2);
console.log(str1);
2 + 3 等於多少? 答:5

減號 -

減號跟加號轉型的方式不同
當減號-兩側其中一方是基本型別但不是數字的狀況會先透過Number()轉成數字再做運算。來看看把加號改成減號的結果:

100 - 123 // -23 
100 - "123" // -23,"123"字串轉成數字

100 - undefined // NaN,undefined 被嘗試轉成數字變成 NaN
"100" - undefined // NaN,都被轉成數字
100 - true // 99,true 轉成數字,值是 1
100 - false // 100,false 轉成數字,值為 0
"100" - false // 100,"100" 跟 false 都被轉成數字
100 - null // 100,null 被轉成數字是 0

如果是物件型別,會透過 valueOf() 求得對應的值,如果物件沒有 valueOf() 方法的話,則會透過 toString() 先轉成字串,再以 Number() 嘗試轉成數字再運算。這邊有點深,未來再補。

乘號 *、除號 / 及取餘數%

這三個比較單純,會先轉為數值去計算,如果轉數值變 NaN,那計算結果自然也是 NaN。

一元運算子

正號 + 與負號 -
只要透過單個數值就可以完成運算,如果在正號 + 與負號 -後面不是數字型態的值,那會透過 Number() 自動轉成數字,再看正負號決定數值。來看舉例:

var a = "-20"; // -20,這時候是字串 
console.log(-a); // 20,字串被轉成數值 -20 與負號計算

var b = "Hello"; 
console.log(+b); // NaN,"Hello"轉數字是 NaN,計算結果為 NaN

所以如果要做 Number() 數字轉型的話,可以直接在變數前面加一個+號。

遞增 ++ 與遞減 --

a = a + 1,可寫作 a++ 同理,
a = a - 1,可寫作 a--。

var a = 5;
a++;
console.log(a); // 6

參考資料:
MDN 運算式與運算子
0 陷阱!0 誤解!8 天重新認識 JavaScript!


上一篇
[Day04] 物件型別
下一篇
[Day06] 自動轉型
系列文
從零開始的JS學習之路30

1 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-20 21:44:44

溫故知新!感恩

我要留言

立即登入留言