ตัวดำเนินการในภาษา JavaScript

ตัวดำเนินการในภาษา JavaScript

ในบทความนี้ เราจะอธิบายเกี่ยวกับตัวดำเนินการในภาษา JavaScript

YouTube Video

ตัวดำเนินการในภาษา JavaScript

ตัวดำเนินการในภาษา JavaScript คือตัวอักษรหรือคำสำคัญที่ใช้สำหรับคำนวณหรือเปรียบเทียบตัวเลขและตัวแปร มีตัวดำเนินการหลายประเภท แต่ละประเภททำงานแตกต่างกัน ด้านล่างคือสรุปตัวดำเนินการหลักบางประเภท:

ตัวดำเนินการทางคณิตศาสตร์

ตัวดำเนินการทางคณิตศาสตร์ของ JavaScript มีดังต่อไปนี้:

ตัวดำเนินการ คำอธิบาย ตัวอย่าง ผลลัพธ์
+ การบวก 5 + 2 7
- การลบ 5 - 2 3
* การคูณ 5 * 2 10
/ การหาร 5 / 2 2.5
% โมดูลัส (เศษเหลือ) 5 % 2 1
++ เพิ่มทีละ 1 let x = 5; x++ 6
-- ลดทีละ 1 let x = 5; x-- 4
 1let a = 10; // Initialize variable 'a' with the value 10
 2let b = 3;  // Initialize variable 'b' with the value 3
 3
 4// Perform and display arithmetic operations between 'a' and 'b'
 5console.log("Addition (a + b):      ", a + b); // 13
 6console.log("Subtraction (a - b):   ", a - b); // 7
 7console.log("Multiplication (a * b):", a * b); // 30
 8console.log("Division (a / b):      ", a / b); // 3.333...
 9console.log("Modulus (a % b):       ", a % b); // 1
10
11// Demonstrate post-increment operation on 'a'
12// Output the current value of 'a' (10), then increment
13console.log("Post-increment (a++):  ", a++);
14// Display the incremented value of 'a' (11)
15console.log("Value of 'a' after increment:", a);
16
17// Demonstrate pre-increment operation on 'a'
18// Increment 'a' first (12) then output
19console.log("Pre-increment (++a):   ", ++a);
20
21// Demonstrate post-decrement operation on 'a'
22// Output the current value of 'a' (12), then decrement
23console.log("Post-decrement (a--):  ", a--);
24// Display the decremented value of 'a' (11)
25console.log("Value of 'a' after decrement:", a);
26
27// Demonstrate pre-decrement operation on 'a'
28// Decrement 'a' first (10) then output
29console.log("Pre-decrement (--a):   ", --a);

ตัวดำเนินการทางคณิตศาสตร์ใช้สำหรับการคำนวณพื้นฐานกับตัวเลข นอกจากการบวกและการลบแล้ว คุณยังสามารถทำการคำนวณเช่น โมดูลัส การเพิ่ม และการลด โปรดทราบว่าค่าที่ได้จากการเพิ่มหรือลดจะต่างกัน ขึ้นอยู่กับว่าตัวดำเนินการอยู่ข้างหน้าหรือข้างหลังตัวแปร

ตัวดำเนินการสำหรับกำหนดค่า

ตัวดำเนินการการกำหนดค่าของ JavaScript มีดังต่อไปนี้:

ตัวดำเนินการ คำอธิบาย ตัวอย่าง ผลลัพธ์
= การกำหนดค่า x = 5 x ถูกกำหนดค่าให้มีค่าคือ 5
+= การกำหนดค่าพร้อมการบวก x += 5 x = x + 5
-= การกำหนดค่าพร้อมการลบ x -= 5 x = x - 5
*= การกำหนดค่าพร้อมการคูณ x *= 5 x = x * 5
/= การกำหนดค่าพร้อมการหาร x /= 5 x = x / 5
%= การกำหนดค่าแบบหารเอาเศษ x %= 5 x = x % 5
 1let x = 10;
 2
 3x += 5;  // x = x + 5, so x becomes 15
 4console.log('After x += 5 : ', x);  // 15
 5
 6x -= 10;
 7console.log('After x -= 10 : ', x);  // 5
 8
 9x *= 3;
10console.log('After x *= 3 : ', x);  // 15
11
12x /= 3;
13console.log('After x /= 3 : ', x);  // 5
14
15x %= 2;
16console.log('After x %= 2 : ', x);  // 1

ตัวดำเนินการกำหนดค่าใช้สำหรับกำหนดค่าหรืออัปเดตค่าของตัวแปร นอกจากการกำหนดค่าปกติแล้ว ยังมีตัวดำเนินการกำหนดค่าสำหรับการคำนวณ เช่น การบวกและการหารเอาเศษ

ตัวดำเนินการเปรียบเทียบ

ตัวดำเนินการเปรียบเทียบของ JavaScript มีดังต่อไปนี้:

ตัวดำเนินการ คำอธิบาย ตัวอย่าง ผลลัพธ์
== เท่ากัน 5 == "5" true
=== เท่ากันอย่างเคร่งครัด (ทั้งประเภทและค่าต้องเท่ากัน) 5 === "5" false
!= ไม่เท่ากัน 5 != "5" false
!== ไม่เท่ากันอย่างเคร่งครัด 5 !== "5" true
> มากกว่า 5 > 2 true
< น้อยกว่า 5 < 2 false
>= มากกว่าหรือเท่ากับ 5 >= 5 true
<= น้อยกว่าหรือเท่ากับ 5 <= 4 false
 1console.log("5 == '5' evaluates to:", 5 == "5");   // true (because the values are equal)
 2console.log("5 === '5' evaluates to:", 5 === "5"); // false (because the types are different)
 3console.log("5 != '5' evaluates to:", 5 != "5");   // false
 4console.log("5 !== '5' evaluates to:", 5 !== "5"); // true
 5console.log("5 > 2 evaluates to:", 5 > 2);         // true
 6console.log("5 < 2 evaluates to:", 5 < 2);         // false
 7console.log("5 >= 5 evaluates to:", 5 >= 5);       // true
 8console.log("5 <= 4 evaluates to:", 5 <= 4);       // false
 9console.log("5 >= '5' evaluates to:", 5 >= "5");   // true
10console.log("5 <= '5' evaluates to:", 5 <= "5");   // true
  • ตัวดำเนินการเปรียบเทียบจะเปรียบเทียบค่าและคืนค่าเป็นจริงหรือเท็จ
  • ตัวดำเนินการเปรียบเทียบเท่ากับ (==) จะทำการแปลงประเภทข้อมูลต่างกันให้อัตโนมัติเมื่อจำเป็นก่อนที่จะทำการเปรียบเทียบ ตัวดำเนินการเปรียบเทียบแบบเข้มงวด (===) จะไม่ทำการแปลงประเภทข้อมูลใดๆ ระหว่างการเปรียบเทียบและจะคืนค่า true ก็ต่อเมื่อค่าทั้งสองมีประเภทเดียวกันและค่าที่เท่ากัน การใช้ตัวดำเนินการเปรียบเทียบแบบเข้มงวด (===) ช่วยป้องกันข้อผิดพลาดที่เกิดจากการแปลงประเภทข้อมูลโดยไม่ตั้งใจ ดังนั้นจึงแนะนำให้ใช้งานเป็นอันดับแรก

ตัวดำเนินการทางตรรกะ

ตัวดำเนินการเชิงตรรกะของ JavaScript มีดังต่อไปนี้:

ตัวดำเนินการ คำอธิบาย ตัวอย่าง ผลลัพธ์
&& AND (ค่าจริงถ้าทั้งสองเงื่อนไขเป็นจริง) true && false false
|| OR (ค่าจริงถ้าเงื่อนไขใดเงื่อนไขหนึ่งเป็นจริง) true || false true
! NOT (เปลี่ยนค่าจริงเป็นเท็จ และค่าเท็จเป็นจริง) !true false
1let a = true;
2let b = false;
3
4console.log("a && b evaluates to:", a && b);  // false
5console.log("a || b evaluates to:", a || b);  // true
6console.log("!a evaluates to:", !a);          // false

ตัวดำเนินการทางตรรกะใช้สำหรับประเมินผลเงื่อนไขหลายเงื่อนไขพร้อมกัน

ลำดับความสำคัญของตัวดำเนินการเชิงตรรกะ

ใน JavaScript ตัวดำเนินการเชิงตรรกะจะถูกประเมินในลำดับ ไม่ ก่อน ตามด้วย และ และสุดท้ายคือ หรือ

NOT มีลำดับความสำคัญสูงสุด

NOT เป็นตัวดำเนินการที่มีเพียงตัวเดียวและมีลำดับความสำคัญสูงสุด

1console.log(!true || false);  // false
AND มีลำดับความสำคัญสูงกว่า OR

AND มีลำดับความสำคัญสูงกว่า OR ดังนั้นส่วนของ AND จะถูกประเมินก่อน

1console.log(true || false && false);  // true

ด้วยวิธีนี้ ส่วน AND (&&) จะถูกประเมินก่อน และผลลัพธ์ของมันจะถูกส่งต่อไปยัง OR (||)

AND และ OR มีการประมวลผลแบบ short-circuit

AND และ OR ใน JavaScript มีการประมวลผลแบบ short-circuit หากผลลัพธ์สามารถกำหนดได้โดยค่าด้านซ้าย การประมวลผลด้านขวาจะไม่ถูกดำเนินการ

1let a = false && console.log("This will not be printed");
2console.log(a);  // false
3
4let b = true || console.log("This will not be printed");
5console.log(b);  // true

ในทั้งสองกรณี console.log() จะไม่ถูกดำเนินการ

สร้างลำดับความสำคัญอย่างชัดเจน

โดยการจัดกลุ่มนิพจน์ด้วยวงเล็บอย่างชัดเจน คุณสามารถป้องกันความเข้าใจผิดเกี่ยวกับลำดับความสำคัญได้

1console.log(true || (false && false));  // true
ความแตกต่างระหว่างภาษาธรรมชาติและการตีความของโปรแกรม

เมื่อใช้ตัวดำเนินการเชิงตรรกะ ควรตระหนักถึงความคลุมเครือในภาษาธรรมชาติ ตัวอย่างเช่น เมื่อพูดว่า 'สุนัขสีขาวหรือแมว' อาจหมายถึง 'สุนัขสีขาวหรือแมวที่มีสีใดก็ได้' หรือ 'สุนัขสีขาวหรือแมวสีขาว' ในโค้ด จะมีลักษณะดังนี้:

1if (isWhite && isDog || isCat) {
2    console.log(' "A white dog" or "a cat of any color" ');
3}
4
5if (isWhite && (isDog || isCat)) {
6    console.log(' "A white dog" or "a white cat" ');
7}
8
9console.log(true || (false && false));  // true

เนื่องจากภาษาธรรมชาติมีความคลุมเครือแบบนี้ จึงควรระมัดระวังเมื่อเขียนโค้ดหรือออกแบบ

ตัวดำเนินการแบบสามเงื่อนไข (Ternary Operator)

JavaScript มี ตัวดำเนินการแบบสามทาง (ตัวดำเนินการตามเงื่อนไข)

ตัวดำเนินการ คำอธิบาย ตัวอย่าง ผลลัพธ์
? : ถ้าเงื่อนไขเป็นจริง จะดำเนินการด้านซ้าย ถ้าเป็นเท็จ จะดำเนินการด้านขวา condition ? if true : if false ผลลัพธ์ขึ้นอยู่กับเงื่อนไข
1let age = 20;
2let message = age >= 18 ? "Adult" : "Minor";
3console.log(message);  // "Adult"

มันถูกเขียนในรูปแบบ เงื่อนไข ? ค่าถ้าเป็นจริง : ค่าถ้าเป็นเท็จ

ตัวดำเนินการระดับบิต

JavaScript ตัวดำเนินการบิตไวส์ ประกอบด้วยสิ่งต่อไปนี้

ตัวดำเนินการ คำอธิบาย ตัวอย่าง ผลลัพธ์
& AND 5 & 1 1
| OR 5 | 1 5
^ XOR 5 ^ 1 4
~ NOT ~5 -6
<< เลื่อนซ้าย 5 << 1 10
>> การเลื่อนบิตทางขวา 5 >> 1 2
 1let x = 0x0F & 0x0C;
 2console.log("0x0F & 0x0C evaluates to:", x, "(0x0C, 12)");  // 0x0C (12)
 3
 4x = 0x04 | 0x02;
 5console.log("0x04 | 0x02 evaluates to:", x, "(0x06, 6)");  // 0x06 (6)
 6
 7x = 0x0F ^ 0x0C;
 8console.log("0x0F ^ 0x0C evaluates to:", x, "(0x03, 3)");  // 0x03 (3)
 9
10// The inverted number is represented as a negative value
11// because JavaScript numbers are stored as signed 32-bit integers.
12x = ~0x0C;
13console.log("~0x0C evaluates to:", x, "(-13, 0xF3)");  // 0xF3 (-13)
14
15x = 0x04 << 1;
16console.log("0x04 << 1 evaluates to:", x, "(0x08, 8)");    // 0x08 (8)
17x = 0x04 >> 1;
18console.log("0x04 >> 1 evaluates to:", x, "(0x02, 2)");    // 0x02 (2)

ตัวดำเนินการบิตใช้สำหรับการคำนวณตัวเลขในระดับบิต โดยปกติจะถูกใช้สำหรับการประมวลผลในระดับต่ำ

ตัวดำเนินการประเภท

JavaScript ตัวดำเนินการประเภท ประกอบด้วยสิ่งต่อไปนี้

ตัวดำเนินการ คำอธิบาย ตัวอย่าง ผลลัพธ์
typeof ส่งคืนประเภทของตัวแปร typeof 123 "number"
instanceof ตรวจสอบว่าอ็อบเจ็กต์เป็นของคลาสเฉพาะหรือไม่ arr instanceof Array true
1console.log(typeof "Hello");  // "string"
2console.log(typeof 42);       // "number"
3
4let arr = [1, 2, 3];
5console.log("arr instanceof Array : ", arr instanceof Array); // true

ตัวดำเนินการประเภทใช้เพื่อตรวจสอบประเภทของค่า หรือแปลงเป็นประเภทที่กำหนด

ตัวดำเนินการ typeof จะคืนค่าประเภทของตัวแปร

ตัวดำเนินการ instanceof จะตรวจสอบว่าวัตถุเป็นส่วนหนึ่งของคลาสเฉพาะหรือไม่

สรุป

  • ตัวดำเนินการทางคณิตศาสตร์ ใช้สำหรับการคำนวณพื้นฐาน
  • ตัวดำเนินการกำหนดค่า ใช้เพื่อกำหนดหรืออัปเดตค่าของตัวแปร
  • ตัวดำเนินการเปรียบเทียบ เปรียบเทียบค่าสองค่ากันและส่งคืนค่า true หรือ false
  • ตัวดำเนินการเชิงตรรกะ ใช้ประเมินผลเพื่อรวมเงื่อนไขต่างๆ
  • ตัวดำเนินการแบบสามส่วน ช่วยให้เขียนคำสั่งเงื่อนไขให้สั้นกว่าการใช้ if
  • ตัวดำเนินการบิต ใช้ในการคำนวณในระดับบิต
  • ตัวดำเนินการประเภท ช่วยให้ตรวจสอบประเภทของค่าได้

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video