JavaScript 运算符

JavaScript 运算符用于赋值，比较值，执行算术运算等。

---

JavaScript 算术运算符

算术运算符用于执行两个变量或值的运算。

赋值 y = 5, 以下表格将向你说明算术运算符的使用：

<p>y = 5, 计算 x = y + 2, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = y + 2;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = y - 2, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = y - 2;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = y * 2, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = y * 2;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = y / 2, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = y / 2;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = y % 2, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = y % 2;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = ++y, y 和 x 为:</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> x 和 y的值将会改变。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = ++y;
    document.getElementById("demo1").innerHTML = y;
    document.getElementById("demo2").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = y++, y 和 x 为:</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> x 和 y的值将会改变。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = y++;
    document.getElementById("demo1").innerHTML = y;
    document.getElementById("demo2").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = --y, y 和 x 为</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> x 和 y的值将会改变。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = --y;
    document.getElementById("demo1").innerHTML = y;
    document.getElementById("demo2").innerHTML = x;
  }
</script>

尝试一下 »

<p>y = 5, 计算 x = y--, y 和 x 为:</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> x 和 y的值将会改变。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
  function myFunction() {
    var y = 5;
    var x = y--;
    document.getElementById("demo1").innerHTML = y;
    document.getElementById("demo2").innerHTML = x;
  }
</script>

尝试一下 »

运算符	描述	例子	y 值	x 值	在线实例
+	加法	x = y + 2	y = 5	x = 7	实例 »
-	减法	x = y - 2	y = 5	x = 3	实例 »
*	乘法	x = y * 2	y = 5	x = 10	实例 »
/	除法	x = y / 2	y = 5	x = 2.5	实例 »
%	余数	x = y % 2	y = 5	x = 1	实例 »
++	自增	x = ++y	y = 6	x = 6	实例 »
		x = y++	y = 6	x = 5	实例 »
--	自减	x = --y	y = 4	x = 4	实例 »
		x = y--	y = 4	x = 5	实例 »

关于算术运算符，你可以阅读我们的 JavaScript 运算符教程。

---

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

<p>x = 10 ， y = 5, 计算 x = y, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 10;
    var y = 5;
    x = y;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>x = 10 ， y = 5, 计算 x += y, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 10;
    var y = 5;
    x += y;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>x = 10 ， y = 5, 计算 x -= y, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 10;
    var y = 5;
    x -= y;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>x = 10 ， y = 5, 计算 x *= y, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 10;
    var y = 5;
    x *= y;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>x = 10 ， y = 5, 计算 x /= y, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 10;
    var y = 5;
    x /= y;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

<p>x = 10 ， y = 5, 计算 x %= y, x 为:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 10;
    var y = 5;
    x %= y;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

运算符	例子	Same As	x 值	在线实例
=	x = y	x = y	x = 5	实例 »
+=	x += y	x = x + y	x = 15	实例 »
-=	x -= y	x = x - y	x = 5	实例 »
*=	x *= y	x = x * y	x = 50	实例 »
/=	x /= y	x = x / y	x = 2	实例 »
%=	x %= y	x = x % y	x = 0	实例 »

关于赋值运算符，你可以阅读我们的 JavaScript 运算符教程。

---

JavaScript 字符串运算符

+ 运算符， += 运算符可用于连接字符串。

给定 text1 = "Good ", text2 = "Morning", 及 text3 = "", 下面的表格解释了字符串运算符的使用：

<p> + 号运算符用于连接字符串。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var text1 = "Good ";
    var text2 = "Morning";
    var text3 = text1 + text2;
    document.getElementById("demo").innerHTML = text3;
  }
</script>

尝试一下 »

<p> + 号运算符用于连接字符串。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var text1 = "Good ";
    var text2 = "Morning";
    text1 += text2
    document.getElementById("demo").innerHTML = text1;
  }
</script>

尝试一下 »

运算符	例子	text1	text2	text3	在线实例
+	text3 = text1 + text2	"Good "	"Morning"	"Good Morning"	实例 »
+=	text1 += text2	"Good Morning"	"Morning"	""	实例 »

---

比较运算符

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。

给定 x=5, 下表展示了比较运算符的使用：

<p>x 赋值为5 , 显示比较后的值 (x == 8):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x == 8);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x == 5):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x == 5);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x === "5"):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x === "5");
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x === 5):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x === 5);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x != 8):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x != 8);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x !== "5"):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x !== "5");
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x !== 5):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x !== 5);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x > 8)。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x > 8);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x < 8):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x < 8);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x >= 8):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x >= 8);
  }
</script>

尝试一下 »

<p>x 赋值为5 , 显示比较后的值 (x <= 8):</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = 5;
    document.getElementById("demo").innerHTML = (x <= 8);
  }
</script>

尝试一下 »

运算符	描述	比较	结果	在线实例
==	等于	x == 8	false	实例 »
		x == 5	true	实例 »
===	值及类型均相等（恒等于）	x === "5"	false	实例 »
		x === 5	true	实例 »
!=	不等于	x != 8	true	实例 »
!==	值与类型均不等（不恒等于）	x !== "5"	true	实例 »
		x !== 5	false	实例 »
>	大于	x > 8	false	实例 »
<	小于	x < 8	true	实例 »
>=	大于或等于	x >= 8	false	实例 »
<=	小于或等于	x <= 8	true	实例 »

关于比较运算符，你可以阅读我们的 JavaScript 比较运算符教程。

---

条件运算符

条件运算符用于基于条件的赋值运算。

给定 x=6 and y=3, 下表演示了条件运算符的运算：

<p>输入你的年龄并点击按钮:</p>
<input id="age" value="18" />
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var age, voteable;
    age = document.getElementById("age").value;
    voteable = (age < 18) ? "太年轻而不能" : "年龄够";
    document.getElementById("demo").innerHTML = voteable + "投票";
  }
</script>

尝试一下 »

语法	例子	在线实例
变量 = (条件) ? 值1:值2	voteable = (age & 18) ? "Too young" : "Old enough"	实例 »

---

逻辑运算符

逻辑运算符用来确定变量或值之间的逻辑关系。

给定 x=6 and y=3, 以下实例演示了逻辑运算符的使用：

运算符	描述	例子
&&	和	(x < 10 && y > 1) 为 true
||	或	(x == 5 || y == 5) 为 false
!	非	!(x == y) 为 true

---

JavaScript 位运算符

位运算符工作于32位的数字上。任何数字操作都将转换为32位。结果会转换为 JavaScript 数字。

运算符	描述	例子	类似于	结果	十进制
&	AND	x = 5 & 1	0101 & 0001	0001	1
|	OR	x = 5 | 1	0101 | 0001	0101	5
~	取反	x = ~ 5	~0101	1010	-6
^	异或	x = 5 ^ 1	0101 ^ 0001	0100	4
<<	左移/td>	x = 5 << 1	0101 << 1	1010	10
>>	右移	x = 5 >> 1	0101 >> 1	0010	2