JavaScript 运算符
目录
加法运算符 + 添加数字：
赋值运算符 = 为变量赋值。
JavaScript 赋值
赋值运算符 (=) 为变量赋值：
作业示例
let x = 10;自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The = Operator</h2>
<p id="demo"></p>
<script>
let x = 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The Assignment (=) Operator</h2>
<p id="demo"></p>
<script>
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z
let z = x + y;
// Display z
document.getElementById("demo").innerHTML = "The sum of x + y is: " + z;
</script>
</body>
</html>
JavaScript 添加
加法运算符 (+) 将数字相加：
添加
let x = 5;
let y = 2;
let z = x + y;自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The + Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
JavaScript 乘法
乘法运算符 (*) 将数字相乘：
乘法
let x = 5;
let y = 2;
let z = x * y;自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The * Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
JavaScript 运算符的类型
JavaScript 运算符有不同类型：
算术运算符
赋值运算符
比较运算符
字符串运算符
逻辑运算符
按位运算符
三元运算符
类型运算符
JavaScript 算术运算符
算术运算符用于对数字执行算术运算：
算术运算符示例
let a = 3;
let x = (100 + 50) * a;自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>Arithmetic Operations</h2>
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p>
<p id="demo"></p>
<script>
let a = 3;
let x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
- +
添加
- -
减法
- *
乘法
- **
求幂 (ES2016)
- /
分配
- %
模数（除法余数）
- ++
增量
- --
递减
笔记
算术运算符在中有完整描述 JS 算术章节。
JavaScript 赋值运算符
赋值运算符将值赋给 JavaScript 变量。
加法赋值运算符 (+=) 向变量添加一个值。
任务
let x = 10;
x += 5;自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The += Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
| Operator | Example | Same As |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| **= | x **= y | x = x ** y |
笔记
赋值运算符在中有完整描述 JS 赋值章节。
JavaScript 比较运算符
- ==
等于
- ===
相等的值和相等的类型
- !=
不等于
- !==
值不相等或类型不相等
- >
比...更棒
- <
少于
- >=
大于或等于
- <=
小于或等于
- ?
三元运算符
笔记
比较运算符在 中有完整描述 JS 比较章节。
JavaScript 字符串比较
上面的所有比较运算符也可以用于字符串：
例子
let text1 = "A";
let text2 = "B";
let result = text1 < text2;自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<p>All conditional operators can be used on both numbers and strings.</p>
<p id="demo"></p>
<script>
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
document.getElementById("demo").innerHTML = "Is A less than B? " + result;
</script>
</body>
</html>
请注意，字符串是按字母顺序比较的：
例子
let text1 = "20";
let text2 = "5";
let result = text1 < text2;自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<p>Note that strings are compared alphabetically:</p>
<p id="demo"></p>
<script>
let text1 = "20";
let text2 = "5";
let result = text1 < text2;
document.getElementById("demo").innerHTML = "Is 20 less than 5? " + result;
</script>
</body>
</html>
JavaScript 字符串加法
+ 也可用于添加（连接）字符串：
例子
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<h2>The + Operator</h2>
<p>The + operator concatenates (adds) strings.</p>
<p id="demo"></p>
<script>
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
document.getElementById("demo").innerHTML = text3;
</script>
</body>
</html>
+= 赋值运算符也可用于添加（连接）字符串：
例子
let text1 = "What a very ";
text1 += "nice day";text1 的结果将是：
What a very nice day自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<h2>The += Operator</h2>
<p>The assignment operator += can concatenate strings.</p>
<p id="demo"></p>
<script>
let text1 = "What a very ";
text1 += "nice day";
document.getElementById("demo").innerHTML = text1;
</script>
</body>
</html>
笔记
当用于字符串时，+ 运算符称为连接运算符。
添加字符串和数字
两个数字相加将返回总和，而数字和字符串相加将返回一个字符串：
例子
let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;x、 y 和 z 的结果将是：
10
55
Hello5
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<h2>The + Operator</h2>
<p>Adding a number and a string, returns a string.</p>
<p id="demo"></p>
<script>
let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>
</body>
</html>
笔记
如果将数字和字符串相加，结果将是字符串！
JavaScript 逻辑运算符
- &&
逻辑和
- ||
逻辑或
- !
逻辑非
笔记
逻辑运算符在中有完整描述 JS 比较章节。
JavaScript 类型运算符
- typeof
返回变量的类型
- instanceof
如果对象是对象类型的实例，则返回 true
笔记
类型运算符在JS类型转换章节中有完整描述。
JavaScript 位运算符
位运算符适用于 32 位数字。
运算中的任何数字操作数都会转换为 32 位数字。 结果被转换回 JavaScript 数字。
| Operator | Description | Example | Same as | Result | Decimal |
|---|---|---|---|---|---|
| & | AND | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | | OR | 5 | 1 | 0101 | 0001 | 0101 | 5 |
| ~ | NOT | ~ 5 | ~0101 | 1010 | 10 |
| ^ | XOR | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | left shift | 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | right shift | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| >>> | unsigned right shift | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
上面的示例使用 4 位无符号示例。但 JavaScript 使用 32 位有符号数字。
因此，在 JavaScript 中，~ 5 不会返回 10。它将返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010
位运算符在 JS 中有完整描述 按位章节。