JavaScript 运算符与表达式

JavaScript 运算符是告诉脚本执行特定的数学或逻辑操作的,一般使用符号来表示,如 + - * /,也有些运算符使用关键字来表示,如delete、void等。JavaScript 运算符包括赋值运算符,算数运算符,字符串运算符,比较运算符,逻辑运算符,类型运算符和位运算符。

而表达式是指可以运算,且必须返回一个确定值的式子。表达式一般由常量、变量、运算符和子表达式构成。


JavaScript 运算符

向变量赋值,并把它们相加:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 运算符</h1>
  5. <p>x = 7,y = 8,计算 z = x + y,然后显示 z:</p>
  6. <p id="demo">
  7. <script>
  8. var x = 7;
  9. var y = 8;
  10. var z = x + y;
  11. document.getElementById("demo").innerHTML = z;
  12. </script>
  13. </body>
  14. </html>

赋值运算符(=)把值赋给变量。

赋值
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>= 运算符</h1>
  5. <p id="demo">
  6. <script>
  7. var x = 15;
  8. document.getElementById("demo").innerHTML = x;
  9. </script>
  10. </body>
  11. </html>

加法运算符(+)对数字相加:

加法
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>+ 运算符</h1>
  5. <p id="demo">
  6. <script>
  7. var x = 7;
  8. var y = 8;
  9. var z = x + y;
  10. document.getElementById("demo").innerHTML = z;
  11. </script>
  12. </body>
  13. </html>

乘法运算符(*)对数字相乘:

乘法
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>* 运算符</h1>
  5. <p id="demo">
  6. <script>
  7. var x = 7;
  8. var y = 8;
  9. var z = x * y;
  10. document.getElementById("demo").innerHTML = z;
  11. </script>
  12. </body>
  13. </html>

JavaScript 算数运算符

算数运算符用于对数字执行算数运算:

运算符描述
+加法
-减法
*乘法
/除法
%系数
++递加
递减

注释:JS 算数这一章对算数运算符进行了完整描述。


JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

= y
运算符例子等同于
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
=x x = x * y
/=x /= yx = x / y
%=x %= yx = x % y

加法赋值运算符(+=)向变量添加一个值。

赋值
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>+= 运算符</h1>
  5. <p id="demo">
  6. <script>
  7. var x = 7;
  8. x += 8;
  9. document.getElementById("demo").innerHTML = x;
  10. </script>
  11. </body>
  12. </html>

注释:JS 赋值这一章中完整描述了赋值运算符。


JavaScript 字符串运算符

+运算符也可用于对字符串进行相加(concatenate,级联)。

  1. txt1 = "Bill";
  2. txt2 = "Gates";
  3. txt3 = txt1 + " " + txt2;

txt3 的结果将是:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 运算符</h1>
  5. <p>+ 运算符串联(相加)字符串。</p>
  6. <p id="demo">
  7. <script>
  8. var txt1 = "Bill";
  9. var txt2 = "Gates";
  10. document.getElementById("demo").innerHTML = txt1 + " " + txt2;
  11. </script>
  12. </body>
  13. </html>

+= 赋值运算符也可用于相加(级联)字符串:

  1. txt1 = "Hello ";
  2. txt1 += "Kitty!";

txt1 的结果将是:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 运算符</h1>
  5. <p>赋值运算符 += 串联字符串。</p>
  6. <p id="demo">
  7. <script>
  8. txt1 = "Hello ";
  9. txt1 += "Kitty!";
  10. document.getElementById("demo").innerHTML = txt1;
  11. </script>
  12. </body>
  13. </html>

提示:在用于字符串时,+ 运算符被称为级联运算符。


字符串和数字的相加

相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串:

  1. x = 7 + 8;
  2. y = "7" + 8;
  3. z = "Hello" + 7;

x、y 和 z 的结果将是:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 运算符</h1>
  5. <p>对数字和字符串相加,会返回字符串。</p>
  6. <p id="demo">
  7. <script>
  8. var x = 7 + 8;
  9. var y = "7" + 8;
  10. var z = "Hello" + 7;
  11. document.getElementById("demo").innerHTML =
  12. x + "<br>" + y + "<br>" + z;
  13. </script>
  14. </body>
  15. </html>

提示:如果您对数字和字符串相加,结果将是字符串!


JavaScript 比较运算符

运算符描述
==等于
===等值等型
!=不相等
!==不等值或不等型
>大于
<小于
>=大于或等于
<=小于或等于
?三元运算符

注释:JS 比较这一章中完整描述了比较运算符。


JavaScript 逻辑运算符

运算符描述
&&逻辑与
||逻辑或
!逻辑非

注释:JS 比较这一章中完整描述了逻辑运算符。


JavaScript 类型运算符

运算符描述
typeof返回变量的类型。
instanceof返回 true,如果对象是对象类型的实例。

注释:JS 类型转换这一章完整描述了类型运算符。


JavaScript 位运算符

位运算符处理 32 位数。该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符描述例子等同于结果十进制
&5 & 10101 & 000100011
|5 | 10101 | 000101015
~~ 5~0101101010
^异或5 ^ 10101 ^ 000101004
<<零填充左位移5 << 10101 << 1101010
>>有符号右位移5 >> 10101 >> 100102
>>>零填充右位移5 >>> 10101 >>> 100102

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。

因此,在 JavaScript 中,~ 5 不会返回 10,而是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010。