JavaScript - ตัวดำเนินการ
Operator คืออะไร?
ให้เราใช้สำนวนง่ายๆ 4 + 5 is equal to 9. ที่นี่เรียกว่า 4 และ 5operands และ '+' เรียกว่า operator. JavaScript รองรับตัวดำเนินการประเภทต่อไปนี้
- ตัวดำเนินการเลขคณิต
- ตัวดำเนินการเปรียบเทียบ
- ตัวดำเนินการเชิงตรรกะ (หรือเชิงสัมพันธ์)
- ผู้ดำเนินการมอบหมาย
- ตัวดำเนินการตามเงื่อนไข (หรือตามเงื่อนไข)
มาดูตัวดำเนินการทั้งหมดทีละคน
ตัวดำเนินการเลขคณิต
JavaScript รองรับตัวดำเนินการทางคณิตศาสตร์ต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 10 และตัวแปร B ถือ 20 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | + (Addition) เพิ่มสองตัวถูกดำเนินการ Ex: A + B จะให้ 30 |
| 2 | - (Subtraction) ลบตัวถูกดำเนินการที่สองจากตัวแรก Ex: A - B จะให้ -10 |
| 3 | * (Multiplication) คูณตัวถูกดำเนินการทั้งสอง Ex: A * B จะให้ 200 |
| 4 | / (Division) หารตัวเศษด้วยตัวส่วน Ex: B / A จะให้ 2 |
| 5 | % (Modulus) แสดงผลส่วนที่เหลือของการหารจำนวนเต็ม Ex: B% A จะให้ 0 |
| 6 | ++ (Increment) เพิ่มค่าจำนวนเต็มขึ้นหนึ่ง Ex: A ++ จะให้ 11 |
| 7 | -- (Decrement) ลดค่าจำนวนเต็มลงหนึ่ง Ex: A-- จะให้ 9 |
Note- ตัวดำเนินการเพิ่มเติม (+) ใช้งานได้กับตัวเลขและสตริง เช่น "a" + 10 จะให้ "a10"
ตัวอย่าง
โค้ดต่อไปนี้แสดงวิธีใช้ตัวดำเนินการทางคณิตศาสตร์ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = ++a;
document.write("++a = ");
result = ++a;
document.write(result);
document.write(linebreak);
b = --b;
document.write("--b = ");
result = --b;
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and then try...
</body>
</html>เอาต์พุต
a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...ตัวดำเนินการเปรียบเทียบ
JavaScript รองรับตัวดำเนินการเปรียบเทียบต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 10 และตัวแปร B ถือ 20 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | = = (Equal) ตรวจสอบว่าค่าของตัวถูกดำเนินการสองตัวเท่ากันหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A == B) ไม่เป็นความจริง |
| 2 | != (Not Equal) ตรวจสอบว่าค่าของตัวถูกดำเนินการสองตัวเท่ากันหรือไม่หากค่าไม่เท่ากันเงื่อนไขจะกลายเป็นจริง Ex: (A! = B) เป็นจริง |
| 3 | > (Greater than) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายมากกว่าค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A> B) ไม่เป็นความจริง |
| 4 | < (Less than) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายน้อยกว่าค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A <B) เป็นจริง |
| 5 | >= (Greater than or Equal to) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายมากกว่าหรือเท่ากับค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A> = B) ไม่เป็นความจริง |
| 6 | <= (Less than or Equal to) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายน้อยกว่าหรือเท่ากับค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A <= B) เป็นจริง |
ตัวอย่าง
โค้ดต่อไปนี้แสดงวิธีใช้ตัวดำเนินการเปรียบเทียบใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);
document.write(result);
document.write(linebreak);
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and different operators and then try...
</body>
</html>เอาต์พุต
(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
a <= b) => true
Set the variables to different values and different operators and then try...ตัวดำเนินการทางตรรกะ
JavaScript รองรับตัวดำเนินการเชิงตรรกะต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 10 และตัวแปร B ถือ 20 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | && (Logical AND) ถ้าตัวถูกดำเนินการทั้งสองไม่ใช่ศูนย์เงื่อนไขจะกลายเป็นจริง Ex: (A && B) เป็นเรื่องจริง |
| 2 | || (Logical OR) หากตัวถูกดำเนินการสองตัวใดตัวหนึ่งไม่เป็นศูนย์เงื่อนไขจะกลายเป็นจริง Ex: (A || B) เป็นจริง |
| 3 | ! (Logical NOT) กลับสถานะตรรกะของตัวถูกดำเนินการ หากเงื่อนไขเป็นจริงตัวดำเนินการ Logical NOT จะทำให้เป็นเท็จ Ex:! (A && B) เป็นเท็จ |
ตัวอย่าง
ลองใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีใช้ Logical Operators ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
document.write("(a || b) => ");
result = (a || b);
document.write(result);
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
(a && b) => false
(a || b) => true
!(a && b) => true
Set the variables to different values and different operators and then try...ตัวดำเนินการ Bitwise
JavaScript รองรับตัวดำเนินการระดับบิตต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 2 และตัวแปร B ถือ 3 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | & (Bitwise AND) ดำเนินการบูลีน AND กับอาร์กิวเมนต์จำนวนเต็มแต่ละบิต Ex: (A & B) คือ 2 |
| 2 | | (BitWise OR) ดำเนินการบูลีนหรือการดำเนินการกับอาร์กิวเมนต์จำนวนเต็มแต่ละบิต Ex: (A | B) คือ 3 |
| 3 | ^ (Bitwise XOR) ดำเนินการบูลีนเอกสิทธิ์เฉพาะหรือการดำเนินการกับอาร์กิวเมนต์จำนวนเต็มแต่ละบิต Exclusive OR หมายความว่าตัวถูกดำเนินการตัวใดตัวหนึ่งเป็นจริงหรือตัวถูกดำเนินการสองเป็นจริง แต่ไม่ใช่ทั้งสองอย่าง Ex: (A ^ B) คือ 1. |
| 4 | ~ (Bitwise Not) เป็นตัวดำเนินการยูนารีและดำเนินการโดยการย้อนกลับบิตทั้งหมดในตัวถูกดำเนินการ Ex: (~ B) คือ -4 |
| 5 | << (Left Shift) มันย้ายบิตทั้งหมดในตัวถูกดำเนินการตัวแรกไปทางซ้ายตามจำนวนตำแหน่งที่ระบุในตัวถูกดำเนินการที่สอง บิตใหม่เต็มไปด้วยศูนย์ การเลื่อนค่าไปทางซ้ายหนึ่งตำแหน่งจะเทียบเท่ากับการคูณด้วย 2 การเลื่อนตำแหน่งสองตำแหน่งจะเท่ากับการคูณด้วย 4 และอื่น ๆ Ex: (A << 1) คือ 4 |
| 6 | >> (Right Shift) ตัวดำเนินการกะไบนารีขวา ค่าของตัวถูกดำเนินการด้านซ้ายจะถูกย้ายไปทางขวาตามจำนวนบิตที่ระบุโดยตัวถูกดำเนินการด้านขวา Ex: (A >> 1) คือ 1 |
| 7 | >>> (Right shift with Zero) ตัวดำเนินการนี้เหมือนกับตัวดำเนินการ >> ยกเว้นว่าบิตที่เลื่อนไปทางซ้ายจะเป็นศูนย์เสมอ Ex: (A >>> 1) คือ 1 |
ตัวอย่าง
ลองใช้โค้ดต่อไปนี้เพื่อใช้ตัวดำเนินการ Bitwise ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
document.write("(a | b) => ");
result = (a | b);
document.write(result);
document.write(linebreak);
document.write("(a ^ b) => ");
result = (a ^ b);
document.write(result);
document.write(linebreak);
document.write("(~b) => ");
result = (~b);
document.write(result);
document.write(linebreak);
document.write("(a << b) => ");
result = (a << b);
document.write(result);
document.write(linebreak);
document.write("(a >> b) => ");
result = (a >> b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
Set the variables to different values and different operators and then try...ผู้ดำเนินการมอบหมาย
JavaScript รองรับตัวดำเนินการกำหนดดังต่อไปนี้ -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | = (Simple Assignment ) กำหนดค่าจากตัวถูกดำเนินการด้านขวาไปยังตัวถูกดำเนินการด้านซ้าย Ex: C = A + B จะกำหนดค่าของ A + B ให้เป็น C |
| 2 | += (Add and Assignment) เพิ่มตัวถูกดำเนินการด้านขวาให้กับตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C + = A เทียบเท่ากับ C = C + A |
| 3 | −= (Subtract and Assignment) มันจะลบตัวถูกดำเนินการด้านขวาออกจากตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C - = A เทียบเท่ากับ C = C - A |
| 4 | *= (Multiply and Assignment) มันจะคูณตัวถูกดำเนินการด้านขวากับตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C * = A เทียบเท่ากับ C = C * A |
| 5 | /= (Divide and Assignment) มันแบ่งตัวถูกดำเนินการด้านซ้ายด้วยตัวถูกดำเนินการด้านขวาและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C / = A เทียบเท่ากับ C = C / A |
| 6 | %= (Modules and Assignment) ใช้โมดูลัสโดยใช้ตัวถูกดำเนินการสองตัวและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C% = A เทียบเท่ากับ C = C% A |
Note - ตรรกะเดียวกันนี้ใช้กับตัวดำเนินการ Bitwise ดังนั้นจึงกลายเป็น << =, >> =, >> =, & =, | = และ ^ =
ตัวอย่าง
ลองใช้รหัสต่อไปนี้เพื่อติดตั้งตัวดำเนินการกำหนดใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 33;
var b = 10;
var linebreak = "<br />";
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...ผู้ดำเนินการเบ็ดเตล็ด
เราจะพูดถึงตัวดำเนินการสองตัวที่นี่มีประโยชน์มากใน JavaScript: conditional operator (? :) และ typeof operator.
ตัวดำเนินการตามเงื่อนไข (? :)
ตัวดำเนินการตามเงื่อนไขจะประเมินนิพจน์สำหรับค่าจริงหรือเท็จก่อนจากนั้นเรียกใช้หนึ่งในสองคำสั่งที่กำหนดขึ้นอยู่กับผลลัพธ์ของการประเมิน
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | ? : (Conditional ) ถ้า Condition เป็นจริง? จากนั้นค่า X: หรือค่า Y |
ตัวอย่าง
ลองใช้รหัสต่อไปนี้เพื่อทำความเข้าใจว่า Conditional Operator ทำงานอย่างไรใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write ("((a > b) ? 100 : 200) => ");
result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);
document.write ("((a < b) ? 100 : 200) => ");
result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...typeof Operator
typeofตัวดำเนินการคือตัวดำเนินการยูนารีที่วางไว้ก่อนตัวถูกดำเนินการเดียวซึ่งอาจเป็นประเภทใดก็ได้ ค่าของมันคือสตริงที่ระบุชนิดข้อมูลของตัวถูกดำเนินการ
ตัวดำเนินการtypeofจะประเมินเป็น "number" "string" หรือ "boolean" ถ้าตัวถูกดำเนินการเป็นตัวเลขสตริงหรือค่าบูลีนและส่งกลับค่าจริงหรือเท็จตามการประเมิน
นี่คือรายการของค่าที่ส่งคืนสำหรับไฟล์ typeof ตัวดำเนินการ.
| ประเภท | สตริงที่ส่งคืนโดย typeof |
|---|---|
| จำนวน | "จำนวน" |
| สตริง | "สตริง" |
| บูลีน | "บูลีน" |
| วัตถุ | "วัตถุ" |
| ฟังก์ชัน | "ฟังก์ชัน" |
| ไม่ได้กำหนด | "ไม่ได้กำหนด" |
| Null | "วัตถุ" |
ตัวอย่าง
โค้ดต่อไปนี้แสดงวิธีการใช้งาน typeof ตัวดำเนินการ
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = "String";
var linebreak = "<br />";
result = (typeof b == "string" ? "B is String" : "B is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
result = (typeof a == "string" ? "A is String" : "A is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
Result => B is String
Result => A is Numeric
Set the variables to different values and different operators and then try...