`truthy` และ `falsy` ใน TypeScript

ในบทความนี้ เราจะอธิบายเกี่ยวกับ truthy และ falsy ใน TypeScript

YouTube Video

truthy และ falsy ใน TypeScript

แนวคิดของ truthy และ falsy ใน TypeScript มีบทบาทสำคัญมากในคำสั่งเงื่อนไขของโปรแกรม ที่นี่ เราจะอธิบายแนวคิดเหล่านี้อย่างละเอียดและวิธีการใช้งานจริง นอกจากนี้ เรายังมีตัวอย่างโค้ด TypeScript เฉพาะเพื่อช่วยให้เข้าใจวิธีจัดการค่า truthy และ falsy

truthy และ falsy คืออะไร?

ใน JavaScript และ TypeScript ค่าทุกอย่างจะถูกประเมินเป็น true (true) หรือ false (false) ในนิพจน์เงื่อนไข ค่าต่างๆ เหล่านี้ถูกจัดระดับทางตรรกะเป็น truthy หรือ falsy

• truthy หมายถึงค่าที่ถูกประเมินว่าเป็น true ในการแสดงเงื่อนไข
• falsy หมายถึงค่าที่ถูกประเมินว่าเป็น false ในการแสดงเงื่อนไข

ใน TypeScript ค่าต่อไปนี้จะถูกพิจารณาเป็น falsy:

2. ตัวเลข 0
3. "" (สตริงว่าง)

ค่านอกเหนือจากนี้จะถูกพิจารณาเป็น truthy

ตัวอย่างเฉพาะของ truthy และ falsy

 1// Examples of falsy values
 2console.log("0 is", Boolean(0) ? "truthy" : "falsy");
 3console.log('"" is', Boolean("") ? "truthy" : "falsy");
 4console.log("null is", Boolean(null) ? "truthy" : "falsy");
 5console.log("undefined is", Boolean(undefined) ? "truthy" : "falsy");
 6console.log("NaN is", Boolean(NaN) ? "truthy" : "falsy");
 7
 8// Examples of truthy values
 9console.log("1 is", Boolean(1) ? "truthy" : "falsy");
10console.log('"hello" is', Boolean("hello") ? "truthy" : "falsy");
11console.log("[] is", Boolean([]) ? "truthy" : "falsy");
12console.log('" " (space) is', Boolean(" ") ? "truthy" : "falsy");

การใช้เงื่อนไขด้วย truthy และ falsy

แนวคิดของ truthy และ falsy มักถูกใช้ในคำสั่งเงื่อนไขและลูป ตัวอย่างเช่น ในคำสั่ง if หรือ while คุณสามารถใช้ค่าต่างๆ เหล่านี้ได้โดยตรงเพื่อการประเมินเงื่อนไขที่ง่าย

 1// Checking if the length of the array is 0
 2let items: string[] = [];
 3
 4if (items.length) {
 5    console.log("The array is not empty");
 6} else {
 7    console.log("The array is empty");
 8}
 9
10// Checking if the input value is empty
11let input = "";
12
13if (input) {
14    console.log("Input has value");
15} else {
16    console.log("Input is empty"); // This will be executed
17}

การจัดการค่าที่เป็น falsy ด้วย ?? (Nullish Coalescing) และ || (Logical OR)

ใน TypeScript มีโอเปอเรเตอร์หลายตัวที่มีประโยชน์เมื่อจัดการกับค่าที่เป็น falsy โดยเฉพาะอย่างยิ่ง Nullish Coalescing Operator (??) และ logical OR operator (||) ที่มักจะถูกใช้งาน

|| (Logical OR)

logical OR operator ถูกใช้เพื่อแทนที่ค่าที่เป็น falsy ด้วยค่าตั้งต้น อย่างไรก็ตาม ค่าทั้งหมดที่เป็น falsy (ไม่ใช่เพียงแค่ null หรือ undefined แต่รวมถึง 0, "" ฯลฯ) จะถูกพิจารณา

1let username = "";
2let displayName = username || "Guest"; // Since username is empty, "Guest" is assigned
3
4console.log(displayName); // "Guest"

??（Nullish Coalescing）

Nullish Coalescing Operator ใช้ค่าตั้งต้นเฉพาะกับ null หรือ undefined โดยไม่เปลี่ยนค่าที่เป็น falsy อื่นๆ (เช่น 0 หรือ "")

1let username2 = "";
2let displayName2 = username2 ?? "Guest";
3// The empty string is retained
4// since username2 is not null or undefined
5
6console.log(displayName2); // ""

ข้อผิดพลาดที่เกี่ยวข้องกับ truthy และ falsy

จุดสำคัญที่ต้องระวังเมื่อทำความเข้าใจ truthy และ falsy คือค่าที่ไม่ได้ตั้งใจอาจถูกพิจารณาเป็น falsy ตัวอย่างเช่น 0 และสตริงที่ว่างเปล่า "" เป็นค่าที่ถูกต้อง แต่ในคำสั่งเงื่อนไข ค่านี้จะถูกพิจารณาเป็น falsy ซึ่งอาจนำไปสู่ผลลัพธ์ที่ไม่ถูกต้อง

1let score = 0;
2
3if (score) {
4    console.log("You have a score!"); // This will not be executed
5} else {
6    console.log("No score available"); // This will be executed
7}

ในกรณีเช่นนี้ การใช้ operator การเปรียบเทียบแบบเข้มงวดช่วยให้คุณสามารถแยกแยะค่าต่างๆ เช่น 0 และ false ได้อย่างถูกต้อง

1let score = 0;
2
3if (score === 0) {
4    console.log("Score is zero"); // Correctly evaluated
5}

ข้อผิดพลาดที่เกี่ยวกับ falsy และ NaN

NaN จำเป็นต้องได้รับการจัดการเป็นพิเศษเพราะมันไม่เท่ากับค่าประเภทใดเลย รวมถึงตัวมันเองด้วย เมื่อใช้ operator การเปรียบเทียบ

1console.log("NaN === NaN:", NaN === NaN); // false

ดังนั้น จึงปลอดภัยกว่าที่จะใช้ Number.isNaN() เพื่อระบุ NaN อย่างถูกต้อง

 1// Bad Example
 2let value = parseInt("0");
 3if (!value) {
 4    console.log("Value is NaN"); // Incorrectly treats 0 as NaN
 5}
 6
 7// Good Example
 8let value2 = parseInt("hello");
 9if (Number.isNaN(value2)) {
10    console.log("Value is NaN"); // Correctly identifies NaN
11}

ดังนั้น NaN จึงไม่เท่ากับตัวมันเองด้วย การเปรียบเทียบกับ NaN จะให้ผลลัพธ์เป็น false เสมอ ด้วยการใช้ Number.isNaN() คุณสามารถตรวจสอบได้อย่างน่าเชื่อถือมากขึ้น

สรุป

แนวคิดของ truthy และ falsy ใน TypeScript นั้นสะดวกมาก แต่คุณต้องระวังค่าบางอย่างโดยเฉพาะอย่างยิ่ง 0 และสตริงที่ว่างเปล่า เมื่อใช้ค่าดังกล่าวในการตรวจสอบเงื่อนไข การใช้การเปรียบเทียบแบบเข้มงวด (===) หรือ Nullish Coalescing Operator (??) แทนการเปรียบเทียบแบบหลวม (==) สามารถช่วยหลีกเลี่ยงพฤติกรรมที่ไม่คาดคิด

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

YouTube Video