JavaScript 運算子 (Operators)

JavaScript 有以下這幾類運算子,來讓你可以做不同的操作:

  • 指定運算子 (Assignment Operators)
  • 比較運算子 (Comparison Operators)
  • 算術運算子 (Arithmetic Operators)
  • 位元運算子 (Bitwise Operators)
  • 邏輯運算子 (Logical Operators)
  • 字串運算子 (String Operators)
  • 三元運算子 (Conditional (ternary) operator)

從運算子 (operator) 和運算元 (operand) 的關係,JavaScript 的運算子,有所謂的一元 (unary) 運算子、二元 (binary) 運算子和三元 (ternary) 運算子。

一個二元運算子,需要有兩個運算元,一個在運算子前面,一個在運算子後面:

operand1 operator operand2

例如

1 + 2
x * y

一個一元運算子,需要有一個運算元,可能是在運算子前面,或是在運算子後面:

operator operand
// 或
operand operator

例如

x++
// 或
++x

指定運算子 (Assignment Operators)

指定運算子用來指定一個值給一個變數。

運算子例子說明
=x = y將 y 值指定給 x 變數
+=x += y意思跟 x = x + y 一樣,將 x y 相加後的值指定回 x 變數
-=x -= y意思跟 x = x - y 一樣,將 x y 相減後的值指定回 x 變數
*=x *= y意思跟 x = x * y 一樣,將 x y 相乘後的值指定回 x 變數
/=x /= y意思跟 x = x / y 一樣,將 x y 相除後的值指定回 x 變數
%=x %= y意思跟 x = x % y 一樣,將 x 除以 y 的餘數指定回 x 變數
**=x **= y意思跟 x = x ** y 一樣,將 x 的 y 次方值指定回 x 變數
<<=x <<= y意思跟 x = x << y 一樣,將 x 所有位元左移 y 位,右邊的位元補入 0 後的值指定回 x 變數
>>=x >>= y意思跟 x = x >> y 一樣,將 x 所有位元右移 y 位,最左邊的位元 (sign bit) 補入跟原本最左位元一樣值後指定回 x 變數
>>>=x >>>= y跟 >>= 一樣,但最左邊的位元補 0
&=x &= y意思跟 x = x & y 一樣,將 x y 做位元 AND 運算後的值指定回 x 變數
^=x ^= y意思跟 x = x ^ y 一樣,將 x y 做位元 XOR 運算後的值指定回 x 變數
|=x |= y意思跟 x = x | y 一樣,將 x y 做位元 OR 運算後的值指定回 x 變數

比較運算子 (Comparison Operators)

用來比較運算子兩邊運算元的關係,比較後傳回 true 或 false。運算元可以是數值、字串、表達式 (expression) 或物件等。

對於不同型態的值,JavaScript 會嘗試將他們轉型 (type conversion) 到同樣型態後,再做比較,通常是先轉到數值型態。

運算子例子說明
==3 == var1
'3' == var1
如果兩邊相等就返回 true
!=var1 != 4
var2 != '3'
如果兩邊不相等就返回 true
===3 === var1跟 == 的差異在於,=== 不會自動嘗試轉型,型態和值都一樣才會返回 true
!==var1 !== '3'
3 !== '3'
跟 != 的差異在於,!== 不會自動嘗試轉型,型態或值不一樣都會返回 true
>var2 > var1
var1 > 2
如果左邊運算元大於右邊的就返回 true
>=var2 >= var1
var1 >= 3
如果左邊運算元大於或等於右邊的就返回 true
<var2 < var1
var1 < 2
如果左邊運算元小於右邊的就返回 true
<=var2 <= var1
var1 <= 3
如果左邊運算元小於或等於右邊的就返回 true

算術運算子 (Arithmetic Operators)

算術運算子用來做常見的數值運算。

運算子例子說明
+var1 + 10加法
-var1 - var2減法
*10 * 10乘法
/var1 / 10除法
%12 % 5模數運算子 (Remainder),以某運算式的值除以另一個運算式的值,並傳回餘數。12 % 5 等於 2
++++10
++x
x++
遞增運算子 (Increment),每次將變數的值加一。如果運算子在變數之前,則會在執行運算式之前修改值。如果運算子在變數之後,則會在執行運算式之後修改值。
例 1: ++10 等於 11
例 2: j = ++k 則 j 的值是 k 的原始值加一
例 3: j = k++ 則 j 的值是 k 的原始值,k 會在其值指派給 j 之後遞增
----10
--x
x--
遞減運算子 (Decrement),每次將變數的值減一。如果運算子在變數之前,則會在執行運算式之前修改值。如果運算子在變數之後,則會在執行運算式之後修改值。
例 1: --10 等於 9
例 2: j = --k 則 j 的值是 k 的原始值減一
例 3: j = k-- 則 j 的值是 k 的原始值,k 會在其值指派給 j 之後遞減
--x
-3
一元負運算子 (Unary negation),例如 -x 如果 x 是 3 則 -x 就是負數 3
++3
+true
一元正運算子 (Unary plus),用在數值上沒啥意義;通常用來做型別轉換,將運算元轉成數值型態。例如 +true 會將布林值 true 轉型成數值 1

位元運算子 (Bitwise Operators)

用來做二進制的位元運算,位元運算子會將運算元看作 32 bits 位元來做運算,然後運算完後會返回數值型態的結果。

運算子例子binary 運算結果說明
&15 & 91111 & 1001 = 10019Bitwise AND 運算,如果兩個位元都是 1,結果就是 1,否則是 0
|15 | 91111 | 1001 = 111115Bitwise OR 運算,如果任何一個位元是 1,結果就是 1,否則是 0
^15 ^ 91111 ^ 1001 = 01106Bitwise XOR 運算,如果位元不相同,結果是 1,否則是 0
~~15~00000000...00001111 = 11111111...11110000-16Bitwise NOT 運算,將所有位元的 0 變成 1,1 變成 0

Bitwise shift 運算子: (9 的二進制是 1001)

運算子例子說明
<<9 << 2 = 36左移運算 (Left shift),將所有位元向左移 n 個位置,右邊的位元補入 0
>>9 >> 2 = 2右移運算 (Sign-propagating right shift),將所有位元向右移 n 個位置,最左邊的位元 (sign bit) 補入跟原本最左位元一樣值,保持正負數一致
>>>19 >>> 2 = 4補零右移 (Zero-Fill Right Shift),跟 >> 一樣,但最左邊的位元補 0

邏輯運算子 (Logical Operators)

邏輯運算子用來做布林值 (boolean) 的運算,運算結果傳回 true 或 false。

在真假判斷式中,所有東西都可以轉換為布林值,而除了 null, 數值 0, NaN, 空字串 ''undefined 是 false,其他的值都是 true。

運算子例子說明
&&expr1 && expr2Logical AND,如果 expr1 和 expr2 都是 true,就會傳回 true, 否則傳回 false
||expr1 || expr2Logical OR,如果 expr1 或 expr2 是 true,就會傳回 true,否則傳回 false
!!exprLogical NOT,如果 expr 是 true,就傳回 false,否則傳回 true

&&|| 還有比較特別的地方,如果運算元的值不是布林值,實際上會傳回其中一個運算元的值,看下面例子。

// foo 是 Dog
var foo = 'Cat' && 'Dog';

// foo 是 false
// 因為 && 遇到 false 的運算元,就會直接返回,不會繼續再往下判斷 (Short-circuit evaluation)
var foo = false && 'Cat';

// foo 是 Cat
// 因為 || 遇到 true 的運算元,就會直接返回,不會繼續再往下判斷 (Short-circuit evaluation)
var foo = 'Cat' || 'Dog';

// foo 是 Cat
var foo = false || 'Cat';

三元運算子 (Conditional (ternary) operator)

condition ? val1 : val2

如果 condition 是 true, 就傳回 val1 的結果,否則傳回 val2 的結果。例如:

// 如果 age 變數大於等於 18,則 status 就會是 adult
// 相反的,如果 age 變數小於 18,則 status 就會是 minor
var status = (age >= 18) ? 'adult' : 'minor';

運算子優先權 (Operator precedence)

各種運算子在處理上的優先次序 (precedence) 是依一般算術規則,先乘除後加減,如果你有一些運算要優先處理,可以放在 () 小括號裡面,例如:

100 + 50 / 2 = 125
(100 + 50) / 2 = 75

這邊整理出 JavaScript 各種運算子的優先權,由高至低排列:

運算子優先權
member. []
call / create instance() new
negation/increment! ~ - + ++ -- typeof void delete
multiply/divide* / %
addition/subtraction+ -
bitwise shift<< >> >>>
relational< <= > >= in instanceof
equality== != === !==
bitwise-and&
bitwise-xor^
bitwise-or|
logical-and&&
logical-or||
conditional?:
assignment= += -= *= /= %= <<= >>= >>>= &= ^=
comma,