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...