ITコラム

JavaScript

2017.09.14

JavaScript【演算子】～種類と優先順位

JavaScriptでは、プラス（+）やイコール（=）など、式の中で演算処理をするための演算子を使います。
今回は、様々なJavaScriptの演算子と演算子間の優先順位について紹介したいと思います。

１．演算子とは

「1 + 2」の「+」のように、演算処理をするための記号を演算子といいます。

JavaScriptには、計算で使用する演算子（算術演算子）以外にも様々な演算子があります。
変数に値を代入する際に使用する「=」や、「,」（カンマ）も演算子です。

▲目次へ戻る

２．演算子の種類

演算子は、処理内容によって分類されています。

主な種類は、次の通りです。

算術演算子四則演算（+、-、*、/）など、数値の計算のための演算子
数値は常に浮動小数点数として扱われる

代入演算子変数に値を代入するための演算子
等価を表すのは比較演算子「==」で、代入演算子「=」ではない点に注意

比較演算子大小関係や等価関係を比較するための演算子
結果として真偽値（true又はfalse）を返す

論理演算子命題の真偽を調べるための演算子
結果として真偽値（true又はfalse）を返す

条件演算子条件の真偽を調べるための演算子
真（true）の場合と偽（false）の場合に返す戻り値も指定する

算術演算子	四則演算（+、-、*、/）など、数値の計算のための演算子数値は常に浮動小数点数として扱われる
代入演算子	変数に値を代入するための演算子等価を表すのは比較演算子「==」で、代入演算子「=」ではない点に注意
比較演算子	大小関係や等価関係を比較するための演算子結果として真偽値（true又はfalse）を返す
論理演算子	命題の真偽を調べるための演算子結果として真偽値（true又はfalse）を返す
条件演算子	条件の真偽を調べるための演算子真（true）の場合と偽（false）の場合に返す戻り値も指定する

▲目次へ戻る

２．１．算術演算子

算術演算子は、足し算、引き算、掛け算、割り算を行う際に使用します。
演算子「%」を使うと、割り算の余りを求めることが出来ます。

num = 3 + 2;   // num には5が代入される
num = 3 - 2;   // num には1 が代入される
num = 3 * 2;   // num には6 が代入される
num = 3 / 2;   // num には1.5 が代入される
num = 3 % 2;   // num には1 が代入される

演算子「+」を用いる場合は、演算対象となる値が数値なのか文字列なのかを注意する必要があります。
演算対象となる値が１つでも文字列となる場合は、算術演算子ではなく、文字列の連結演算子として機能します。

dat = "3" + 2;

この場合は、datに「5」ではなく「32」が代入されます。

これに対して、演算子「-」は、算術演算子としての機能しかないため、演算子「-」を使うと、演算対象となる値は数値として扱われます。
この性質を生かして、値を数値として処理したい場合は、0を減算する方法があります。

dat = "3" - 0 + 2;

このように記述すると、datには「32」ではなく「5」が代入されます。

演算対象となる値が定数値のみの場合は、引用符（ダブルコーテーションやシングルコーテーション）があるかどうかで文字列か数値かの区別が容易にできますが、演算対象に変数が入る場合などは、その値が文字列なのか数値なのか、瞬時には判断できないので、0を減算しておくと安心です。

また、フォームに入力された値は文字列とみなされるので、ここでも、算術演算をしたい場合は0を減算します。

<script type="text/javascript">
<!--
function calc() {
    alert(document.f1.t1.value + 4);        // "1234" になる
    alert((document.f1.t1.value - 0) + 4);  // 127 になる
}
// -->
</script>

<form name="f1" action="#">
    <input type="text" name="t1" value="123">
    <input type="button" value="OK" onClick="calc()">
</form>

テキストボックスの値が初期値のまま「123」とすると、
「alert(document.f1.t1.value + 4);」では「1234」が表示され、
「alert((document.f1.t1.value – 0) + 4);」では「127」が表示されます。
　
インクリメント演算子「++」は、値を１つ増やし、デクリメント演算子「–」は、値を１つ減らす演算子です。
インクリメント演算子（又はデクリメント演算子）を先頭に記述するか、末尾に記述するかで、結果として返される値が変わってきます。

// x の値は 6 となる
x = 5; x++;

// x の値は 6、y の値は 5 となる
x = 5; y = x++;

// x の値は 6、y の値は 6 となる
x = 5; y = ++x;

インクリメント演算子を使用した式が実行された後は、演算子を先頭に記述しても、末尾に記述しても、値が１つ増えることに変わりはありません。
違いが生じるのは、「y = x++;」の「y」に代入される値です。
インクリメント演算子を変数xの末尾に記述すると（x++）、加算する前の値を y に代入します。
インクリメント演算子を変数xの先頭に記述すると（++x）、加算した後の値を y に代入します。
デクリメント演算子についても同様です。

▲目次へ戻る

２．２．代入演算子

他のプログラムと同様に、JavaScriptでも、イコール記号（=）は等しい場合ではなく代入する場合に使用します。

// x に 5 が代入される
x = 5;

// y に x の値が代入される
y = x;

// str に文字列"こんにちは！"が代入される
str = "こんにちは！";

　
次の例は、数学的には成立しない式ですが、JavaScript では普通に使われます。

x = x + 2;

変数x に、x の値と 2 を足したものを代入する、という式です。
あらかじめ x に 5 が代入されているとすると、実行後の x の値は 7 となります。

▲目次へ戻る

２．３．比較演算子

「==」や「!=」、「<」、「>」等の演算子を、比較演算子といいます。

演算子「==」は、比較対象が等しければ true（真）、それ以外は false（偽）を返します。
演算子「!=」は、比較対象が等しくなければ true（真）、それ以外は false（偽）を返します。

数値にも文字列にも使用できます。

if (x == 5) {
    alert("x は 5 です。");
}
if (y != "田中") {
    alert("田中さんではありません。");
}

　
演算子「<」は、左辺が右辺より小さい場合に true（真）、それ以外は false（偽）を返します。
演算子「<=」は、左辺が右辺以下の場合に true（真）、それ以外は false（偽）を返します。
演算子「>」は、左辺が右辺より大きい場合に true（真）、それ以外は false（偽）を返します。
演算子「>=」は、左辺が右辺以上の場合に true（真）、それ以外は false（偽）を返します。

if (x < 100) {
    alert("x は 100 より小さいです。");
}

if (str < "H") {
    alert("str は H よりも前にあります。");
}

文字列に対して使用した場合は、アルファベット順の前後比較を行います。

▲目次へ戻る

２．４．論理演算子

演算子「&&」、「||」、「!」を、論理演算子といいます。

演算子「&&」は、「かつ」の意味で、「A && B」という式は、A も B も両方とも正しい場合に true（真）を返します。
演算子「||」は、「又は」の意味で、「A || B」という式は、A か B かどちらかが正しい場合に true（真）を返します。
演算子「!」は、否定の意味で、「!A」という式は、A が正しくない場合に true（真）を返します。

// mon が 1 以上 12 以下の場合に、((1 <= mon) && (mon <= 12)) が true となる
if ((1 <= mon) && (mon <= 12)) {
    alert("mon は 1 以上 12 以下のです。");
}

// str が 大文字か小文字のABCの場合に、((str == "ABC") || (str == "abc")) が true となる
if ((str == "ABC") || (str == "abc")) {
    alert("str は ABC です。");
}

// x が 5 でない場合に、(!(x == 5)) が true となる
if (!(x == 5)) {
    alert("x は 5 ではありません。");
}

▲目次へ戻る

２．５．条件演算子

演算子「?」と「:」を、条件演算子といいます。

条件演算子は、JavaScript では唯一の、３つのオペランド（演算子以外の構成要素）を持つ演算子です。

「A が true（真）であれば B を、それ以外は C を返す」という式を立てる場合に使用します。

str = (age >= 20) ? "成人" : "未成年";

この例は、age が 20 以上であれば "成人"、それ以外は "未成年" を str に代入する式です。

▲目次へ戻る

３．演算子の優先順位

JavaScriptの演算子間には、優先順位があります。

また、優先度が等しい演算子間は、左側にある方が優先度が高くなります。
ですので、例えば、
「x = 3 + 4 * 5 / 2;」は、そのままでも通常の計算結果である 13 が x に代入されますが、
「x = 3 + ((4 * 5) / 2);」と記述すると、優先度を意識した、より安全性の高い記述となります。

各演算子の優先順位は、次の通りです。

優先順位演算子意味

0 . メンバ

new new

1 () 関数呼び出し

2 ++ インクリメント

-- デクリメント

3 ! 論理NOT

~ ビットごとのNOT

+ 単項プラス

- 単項マイナス（算術否定）

typeof typeof

void void

delete delete

4 * 乗算

/ 除算

% 剰余

5 + 加算

- 減算

6 << 左シフト

>> 右シフト

>>> 0埋め右シフト

7 < より小さい（未満）

<= より小さいか等しい（以下）

> より大きい（超）

>= より大きいか等しい（以上）

in in

instanceof instanceof

8 == 等しい

!= 等しくない

=== 厳密に等しい

!== 厳密に等しくない

9 & ビットごとのAND

10 ^ ビットごとのXOR

11 | ビットごとのOR

12 && 論理AND

13 || 論理OR

14 ?: 条件

15 = 代入

+= 加算代入

-= 減算代入

*= 乗算代入

/= 除算代入

%= 剰余代入

<<= 左シフト代入

>>= 右シフト代入

>>>= 0埋め右シフト代入

&= ビットごとのAND代入

^= ビットごとのXOR代入

|= ビットごとのOR代入

16 , カンマ

優先順位	演算子	意味
0	.	メンバ
new	new
1	()	関数呼び出し
2	++	インクリメント
--	デクリメント
3	!	論理NOT
~	ビットごとのNOT
+	単項プラス
-	単項マイナス（算術否定）
typeof	typeof
void	void
delete	delete
4	*	乗算
/	除算
%	剰余
5	+	加算
-	減算
6	<<	左シフト
>>	右シフト
>>>	0埋め右シフト
7	<	より小さい（未満）
<=	より小さいか等しい（以下）
>	より大きい（超）
>=	より大きいか等しい（以上）
in	in
instanceof	instanceof
8	==	等しい
!=	等しくない
===	厳密に等しい
!==	厳密に等しくない
9	&	ビットごとのAND
10	^	ビットごとのXOR
11	\|	ビットごとのOR
12	&&	論理AND
13	\|\|	論理OR
14	?:	条件
15	=	代入
+=	加算代入
-=	減算代入
*=	乗算代入
/=	除算代入
%=	剰余代入
<<=	左シフト代入
>>=	右シフト代入
>>>=	0埋め右シフト代入
&=	ビットごとのAND代入
^=	ビットごとのXOR代入
\|=	ビットごとのOR代入
16	,	カンマ