ตัวดำเนินการในภาษา 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 ด้วย