ตัวดำเนินการใน TypeScript

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

YouTube Video