演算子とは | JavaScript逆引き | Webサイト制作支援

文字列連結演算子

文字列連結演算子は、文字列を連結・結合するための演算子です。

var result = 'abc' + 'def';
console.log(result); // abcdef

数字が文字列である場合（数字をシングルまたはダブルクォーテーションで囲ってある場合）、もう片方の連結する数字が数値である場合では計算されず、文字列として扱い連結されます。

var result = '1' + 2;
console.log(result); // 12

そのため、数値として扱って計算させたい場合は、必ず文字列となっている数字を数値に変換させてあげる必要があります。

var result = Number('1') + 2;
console.log(result); // 3

代入演算子は、変数に値を代入し、代入した値を返します。

通常代入は、=で表します。

var num = 0;

num = 2;

alert(num);

加算代入は、+=で表します。

var num = 0;

num += 3;

alert(num);

減算代入は、-=で表します。

var num = 0;

num -= 4;

alert(num);

乗算代入は、*=で表します。

var num = 0;

num *= 5;

alert(num);

除算代入は、/=で表します。

var num = 0;

num /= 6;

alert(num);

剰余代入は、%=で表します。

var num = 0;

num %= 7;

alert(num);

算術演算子は、四則演算などの基本的な算術に関する演算子です。

加算演算子は、+で表します。

var result = 1 + 2;
alert(result);

減算演算子は、-で表します。

var result = 1 - 2;
alert(result);

乗算演算子は、*で表します。

var result = 1 * 2;
alert(result);

除算演算子は、/で表します。

var result = 1 / 2;
alert(result);

剰余演算子は、%で表します。

var result = 1 % 2;
alert(result);

インクリメント演算子は、++で表します。

var num = 0;

// 後に付ける場合
num++;

// 前に付ける場合
++num;

alert(num);

値の前または後に付けますが、それぞれ返し方が異なり、記号を前につけた場合は戻り値は加算前、後に付けた場合は加算後の値を返します。

var num = 0;

// 後に付ける場合
var result = num++;
alert(result);

// 前に付ける場合
var result = ++num;
alert(result);

デクリメント演算子は、--で表します。

var num = 0;

// 後に付ける場合
num--;

// 前に付ける場合
--num;

alert(num);

値の前または後に付けますが、それぞれ返し方が異なり、記号を前につけた場合は戻り値は減算前、後に付けた場合は減算後の値を返します。

var num = 0;

// 後に付ける場合
var result = num--;
alert(result);

// 前に付ける場合
var result = --num;
alert(result);

論理演算子は、複数の条件式をつなげるための演算子です。

論理積演算子は、&&で表します。
次の例は変数fooが123かつ変数barが'abc'であるかの条件文です。

if (foo === 123 && bar === 'abc') {
	// 変数fooが123ある場合かつ変数barが'abc'である場合はここを通る
	...
}

論理和演算子は、||で表します。
次の例は変数fooが123または変数barが'abc'であるかの条件文です。

if (foo === 123 || bar === 'abc') {
	// 変数fooが123ある場合または変数barが'abc'である場合はここを通る
	...
}

論理否定演算子は、!で表します。
次の例は変数fooが123でないかの条件文です。

if (foo !== 123) {
	// 変数fooが123でない場合はここを通る
	...
}

比較演算子は、値同士を比較するための演算子です。

演算子名	演算子	説明
等しい	`==`	値が等しい場合はtrueを返す。
厳密に等しい	`===`	値が等しいかつ型が同じ場合はtrueを返す。
等しくない	`!=`	値が等しくない場合はtrueを返す。
厳密に等しくない	`!==`	値が等しくないかつ型が同じでない場合はtrueを返す。
より大きい	`>`	左の値が右の値より大きい（超える）場合はtrueを返す。
以上	`>=`	左の値が右の値と同じか大きい（超える）場合はtrueを返す。
より小さい	`<`	左の値が右の値より小さい場合はtrueを返す。
以下	`<=`	左の値が右の値と同じか未満の場合はtrueを返す。

if (foo > 1) {
	// 変数fooが1より大きい場合はここを通る
	...
}