ตัวดำเนินการใน TypeScript
บทความนี้อธิบายตัวดำเนินการใน TypeScript
YouTube Video
ตัวดำเนินการใน TypeScript
ตัวดำเนินการใน TypeScript ถูกใช้สำหรับการคำนวณตัวเลข การเปรียบเทียบค่า และการดำเนินงานทางตรรกะ เนื่องจาก TypeScript ใช้ตัวดำเนินการที่คล้ายกับ JavaScript จึงง่ายต่อการใช้งาน แต่ TypeScript ยังช่วยให้สามารถดำเนินงานได้อย่างเข้มงวดมากขึ้นด้วยความปลอดภัยของประเภทข้อมูล
ตัวดำเนินการหลักมีดังต่อไปนี้:
ตัวดำเนินการทางคณิตศาสตร์
ตัวดำเนินการทางคณิตศาสตร์ถูกใช้สำหรับการคำนวณตัวเลข
ตัวดำเนินการ | คำอธิบาย | ตัวอย่าง | ผลลัพธ์ |
---|---|---|---|
+ |
การบวก | 5 + 3 |
8 |
- |
การลบ | 5 - 3 |
2 |
* |
การคูณ | 5 * 3 |
15 |
/ |
การหาร | 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);
ตัวดำเนินการกำหนดค่า
ตัวดำเนินการกำหนดค่าถูกใช้เพื่อกำหนดค่าทางด้านขวาไปยังตัวแปรทางด้านซ้าย
ตัวดำเนินการ | คำอธิบาย | ตัวอย่าง | ผลลัพธ์ |
---|---|---|---|
= |
การกำหนดค่า | x = 10 |
x = 10 |
+= |
การบวกและกำหนดค่า | x += 5 |
x = 15 |
-= |
การลบและกำหนดค่า | x -= 5 |
x = 5 |
*= |
การคูณและกำหนดค่า | x *= 2 |
x = 20 |
/= |
การหารและกำหนดค่า | x /= 2 |
x = 5 |
%= |
การหาเศษและกำหนดค่า | x %= 3 |
x = 1 |
1let z = 5;
2z += 3;
3console.log(z); // Outputs: 8
4
5z *= 2;
6console.log(z); // Outputs: 16
ตัวดำเนินการเปรียบเทียบ
ตัวดำเนินการเปรียบเทียบจะเปรียบเทียบค่าต่าง ๆ และคืนค่าเป็น true
หรือ false
ตัวดำเนินการ | คำอธิบาย | ตัวอย่าง | ผลลัพธ์ |
---|---|---|---|
== |
เท่ากัน (ไม่ตรวจสอบชนิดของข้อมูล) | 5 == "5" |
true |
=== |
เท่ากันอย่างเคร่งครัด (รวมชนิดของข้อมูล) | 5 === "5" |
false |
!= |
ไม่เท่ากัน (ไม่ตรวจสอบชนิดของข้อมูล) | 5 != "5" |
false |
!== |
ไม่เท่ากันอย่างเคร่งครัด (รวมชนิดของข้อมูล) | 5 !== "5" |
true |
> |
มากกว่า | 5 > 3 |
true |
< |
น้อยกว่า | 5 < 3 |
false |
>= |
มากกว่าหรือเท่ากับ | 5 >= 5 |
true |
<= |
น้อยกว่าหรือเท่ากับ | 5 <= 3 |
false |
1console.log('5 == "5" :', 5 == "5"); // Outputs: true
2console.log('5 === "5" :', 5 === "5"); // Outputs: false
3console.log('5 != "5" :', 5 != "5"); // Outputs: false
4console.log('5 !== "5" :', 5 !== "5"); // Outputs: true
5console.log('5 > 3 :', 5 > 3); // Outputs: true
6console.log('5 < 3 :', 5 < 3); // Outputs: false
7console.log('5 >= 5 :', 5 >= 5); // Outputs: true
8console.log('5 <= 3 :', 5 <= 3); // Outputs: false
ตัวดำเนินการเชิงตรรกะ
ตัวดำเนินการเชิงตรรกะถูกใช้สำหรับการรวมคำสั่งเชิงตรรกะ
ตัวดำเนินการ | คำอธิบาย | ตัวอย่าง | ผลลัพธ์ |
---|---|---|---|
&& |
AND เชิงตรรกะ | true && false |
false |
|| |
OR เชิงตรรกะ | true || false |
true |
! |
การปฏิเสธ (NOT) | !true |
false |
1console.log('true && false :', true && false); // Outputs: false
2console.log('true || false :', true || false); // Outputs: true
3console.log('!true :', !true); // Outputs: false
ลำดับความสำคัญของตัวดำเนินการทางตรรกะ
ใน TypeScript ตัวดำเนินการทางตรรกะมักจะถูกประเมินตามลำดับคือ NOT
ก่อน ตามด้วย AND
และสุดท้ายคือ OR
NOT
มีลำดับความสำคัญสูงสุด
NOT
เป็นตัวดำเนินการแบบเอกฐานและถูกประเมินด้วยลำดับความสำคัญสูงสุด
1console.log(!true || false); // false
AND
มีลำดับความสำคัญมากกว่า OR
AND
มีลำดับความสำคัญมากกว่า OR
ดังนั้นส่วนของ AND
จะถูกประเมินก่อน
1console.log(true || false && false); // true
ดังนั้น ส่วนของ AND
(&&
) จะถูกคำนวณก่อน และผลลัพธ์ของมันจะถูกส่งต่อไปยัง OR
(||
)
AND
และ OR
ทำการประเมินแบบ Short-Circuit
ใน TypeScript AND
และ OR
ทำการประเมินแบบ 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}
เนื่องจากภาษาธรรมชาติอาจมีความกำกวม จึงต้องระมัดระวังเมื่อต้องการเขียนโค้ดและออกแบบระบบ
ตัวดำเนินการระดับบิต
ตัวดำเนินการระดับบิตใช้สำหรับจัดการตัวเลขในระดับบิต
ตัวดำเนินการ | คำอธิบาย | ตัวอย่าง | ผลลัพธ์ |
---|---|---|---|
& |
AND เชิงตรรกะ | 5 & 1 |
1 |
` | ` | OR เชิงตรรกะ | 5 | 1 |
^ |
OR เอกซ์คลูซีฟ (XOR) | 5 ^ 1 |
4 |
~ |
การปฏิเสธ (NOT) | ~5 |
-6 |
<< |
การเลื่อนบิตไปทางซ้าย | 5 << 1 |
10 |
>> |
การเลื่อนบิตไปทางขวา (แบบมีเครื่องหมาย) | 5 >> 1 |
2 |
>>> |
การเลื่อนบิตไปทางขวา (แบบไม่มีเครื่องหมาย) | 5 >>> 1 |
2 |
1console.log('5 & 1 :', 5 & 1); // Outputs: 1 (AND operation)
2console.log('5 | 1 :', 5 | 1); // Outputs: 5 (OR operation)
3console.log('5 ^ 1 :', 5 ^ 1); // Outputs: 4 (XOR operation)
4console.log('~5 :', ~5); // Outputs: -6 (NOT operation)
5console.log('5 << 1 :', 5 << 1); // Outputs: 10 (Left shift operation)
6console.log('5 >> 1 :', 5 >> 1); // Outputs: 2 (Right shift operation)
7console.log('5 >>> 1:', 5 >>> 1); // Outputs: 2 (Unsigned right shift operation)
ตัวดำเนินการแบบสามทาง
ตัวดำเนินการแบบสามทางจะให้ผลลัพธ์ที่แตกต่างกันขึ้นอยู่กับผลลัพธ์ของนิพจน์เงื่อนไข
1let age = 20;
2let access = (age >= 18) ? "Allowed" : "Denied";
3console.log(access); // Outputs: Allowed
ตัวดำเนินการประเภท
ตัวดำเนินการประเภท ของ TypeScript รวมถึงสิ่งต่อไปนี้:
ตัวดำเนินการ | คำอธิบาย | ตัวอย่าง | ผลลัพธ์ |
---|---|---|---|
typeof |
คืนค่าประเภทของตัวแปร | typeof 123 |
"number" |
instanceof |
ตรวจสอบว่าวัตถุเป็นของคลาสที่ระบุหรือไม่ | arr instanceof Array |
true |
is |
ในฐานะการป้องกันประเภท ตรวจสอบว่าค่ามีประเภทที่ระบุหรือไม่ | value is string |
true or false |
1console.log(typeof "Hello"); // "string"
2console.log(typeof 42); // "number"
3
4let arr: number[] = [1, 2, 3];
5console.log("arr instanceof Array : ", arr instanceof Array); // true
6
7// Example of Type Guard
8function isString(value: any): value is string {
9 return typeof value === "string";
10}
11
12let value: any = "Hello";
13if (isString(value)) {
14 console.log("Value is a string:", value); // "Value is a string: Hello"
15}
ตัวดำเนินการประเภทใช้เพื่อตรวจสอบประเภทของค่า หรือแปลงค่าให้เป็นประเภทที่เจาะจง
- ตัวดำเนินการ
typeof
จะคืนค่าประเภทของตัวแปร - ตัวดำเนินการ
instanceof
ตรวจสอบว่าวัตถุเป็นของคลาสใดคลาสหนึ่งหรือไม่ - ตัวดำเนินการ
is
ใช้เพื่อตรวจสอบว่าค่ามีประเภทที่เจาะจงหรือไม่ เป็นส่วนหนึ่งของการป้องกันประเภทใน TypeScript
สรุป
- ตัวดำเนินการทางคณิตศาสตร์: ทำการคำนวณพื้นฐาน
- ตัวดำเนินการการกำหนดค่า: กำหนดค่าตัวแปร
- ตัวดำเนินการเปรียบเทียบ: เปรียบเทียบค่า
- ตัวดำเนินการเชิงตรรกะ: รวมเงื่อนไขเชิงตรรกะ
- ตัวดำเนินการระดับบิต: ดำเนินการในระดับบิต
- ตัวดำเนินการแบบสามทาง: คืนค่าตามเงื่อนไข
- ตัวดำเนินการประเภท สามารถตรวจสอบประเภทของค่าได้
ใน TypeScript ตัวดำเนินการเหล่านี้สามารถใช้เขียนการคำนวณที่ซับซ้อนและนิพจน์เงื่อนไขได้อย่างมีประสิทธิภาพ
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย