Web-Dev-For-Beginners/translations/th/2-js-basics/3-making-decisions/README.md

พื้นฐาน JavaScript: การตัดสินใจ

ภาพสเก็ตโน้ตโดย Tomomi Imura

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

เช่นเดียวกับเครื่อง Analytical Engine ของ Charles Babbage ที่ถูกออกแบบมาให้ทำงานตามลำดับของการดำเนินการที่แตกต่างกันตามเงื่อนไข โปรแกรม JavaScript สมัยใหม่ก็ต้องการความสามารถในการเลือกทางตามสถานการณ์ที่เปลี่ยนแปลง ความสามารถในการแยกและตัดสินใจนี้คือสิ่งที่เปลี่ยนโค้ดที่นิ่งเฉยให้กลายเป็นแอปพลิเคชันที่ตอบสนองและฉลาด

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

แบบทดสอบก่อนเรียน

แบบทดสอบก่อนเรียน

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

🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอเกี่ยวกับการตัดสินใจ

คุณสามารถเรียนบทเรียนนี้ได้ที่ Microsoft Learn!

ทบทวนเรื่องบูลีนอย่างย่อ

ก่อนที่จะสำรวจการตัดสินใจ ลองมาทบทวนค่าบูลีนจากบทเรียนก่อนหน้านี้กัน ค่าบูลีนตั้งชื่อตามนักคณิตศาสตร์ George Boole ซึ่งค่าบูลีนแสดงถึงสถานะสองแบบ – true หรือ false ไม่มีความคลุมเครือ ไม่มีพื้นที่ตรงกลาง

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

การสร้างตัวแปรบูลีนทำได้ง่าย:

let myTrueBool = true;
let myFalseBool = false;

นี่คือการสร้างตัวแปรสองตัวที่มีค่าบูลีนที่ชัดเจน

✅ ค่าบูลีนตั้งชื่อตาม George Boole นักคณิตศาสตร์ นักปรัชญา และนักตรรกศาสตร์ชาวอังกฤษ (1815–1864)

ตัวดำเนินการเปรียบเทียบและค่าบูลีน

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

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

สัญลักษณ์	คำอธิบาย	ตัวอย่าง
<	น้อยกว่า: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน true หากค่าด้านซ้ายมีค่าน้อยกว่าด้านขวา	5 < 6 // true
<=	น้อยกว่าหรือเท่ากับ: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน true หากค่าด้านซ้ายมีค่าน้อยกว่าหรือเท่ากับด้านขวา	5 <= 6 // true
>	มากกว่า: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน true หากค่าด้านซ้ายมีค่ามากกว่าด้านขวา	5 > 6 // false
>=	มากกว่าหรือเท่ากับ: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน true หากค่าด้านซ้ายมีค่ามากกว่าหรือเท่ากับด้านขวา	5 >= 6 // false
===	เท่ากันแบบเคร่งครัด: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน true หากค่าด้านขวาและด้านซ้ายเท่ากัน และ เป็นประเภทข้อมูลเดียวกัน	5 === 6 // false
!==	ไม่เท่ากัน: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีนตรงข้ามกับที่ตัวดำเนินการเท่ากันแบบเคร่งครัดจะคืนค่า	5 !== 6 // true

✅ ทดสอบความรู้ของคุณโดยการเขียนการเปรียบเทียบในคอนโซลของเบราว์เซอร์ มีข้อมูลที่คืนค่ามาอันไหนที่ทำให้คุณประหลาดใจหรือไม่?

คำสั่ง If

คำสั่ง if เหมือนกับการตั้งคำถามในโค้ดของคุณ "ถ้าเงื่อนไขนี้เป็นจริง ให้ทำสิ่งนี้" มันอาจเป็นเครื่องมือที่สำคัญที่สุดที่คุณจะใช้ในการตัดสินใจใน JavaScript

นี่คือวิธีการทำงาน:

if (condition) {
  // Condition is true. Code in this block will run.
}

เงื่อนไขจะอยู่ในวงเล็บ และถ้ามันเป็น true JavaScript จะรันโค้ดในวงเล็บปีกกา ถ้ามันเป็น false JavaScript จะข้ามบล็อกนั้นไป

คุณจะใช้ตัวดำเนินการเปรียบเทียบเพื่อสร้างเงื่อนไขเหล่านี้บ่อยครั้ง ลองดูตัวอย่างที่ใช้งานได้จริง:

let currentMoney = 1000;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

เนื่องจาก 1000 >= 800 ประเมินค่าเป็น true โค้ดในบล็อกจึงถูกดำเนินการ โดยจะแสดงข้อความ "Getting a new laptop!" ในคอนโซล

คำสั่ง If..Else

แต่ถ้าคุณต้องการให้โปรแกรมของคุณทำสิ่งอื่นเมื่อเงื่อนไขเป็นเท็จล่ะ? นั่นคือที่มาของ else – มันเหมือนกับการมีแผนสำรอง

คำสั่ง else ให้คุณสามารถบอกว่า "ถ้าเงื่อนไขนี้ไม่เป็นจริง ให้ทำสิ่งอื่นแทน"

let currentMoney = 500;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  // Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

ตอนนี้เนื่องจาก 500 >= 800 เป็น false JavaScript จะข้ามบล็อกแรกและรันบล็อก else แทน คุณจะเห็นข้อความ "Can't afford a new laptop, yet!" ในคอนโซล

✅ ทดสอบความเข้าใจของคุณเกี่ยวกับโค้ดนี้และโค้ดต่อไปนี้โดยการรันในคอนโซลของเบราว์เซอร์ เปลี่ยนค่าของตัวแปร currentMoney และ laptopPrice เพื่อเปลี่ยนค่าที่คืนใน console.log()

คำสั่ง Switch

บางครั้งคุณจำเป็นต้องเปรียบเทียบค่าหนึ่งกับตัวเลือกหลายตัว แม้ว่าคุณจะสามารถเชื่อมโยงคำสั่ง if..else หลายตัวได้ แต่แนวทางนี้อาจทำให้โค้ดดูยุ่งยาก คำสั่ง switch ให้โครงสร้างที่สะอาดกว่าในการจัดการค่าที่แตกต่างกันหลายค่า

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

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

นี่คือโครงสร้างของมัน:

• JavaScript จะประเมินนิพจน์เพียงครั้งเดียว
• มันจะดูแต่ละ case เพื่อหาค่าที่ตรงกัน
• เมื่อพบค่าที่ตรงกัน มันจะรันโค้ดในบล็อกนั้น
• คำสั่ง break จะบอก JavaScript ให้หยุดและออกจาก switch
• หากไม่มี case ใดตรงกัน มันจะรันบล็อก default (ถ้าคุณมี)

// Program using switch statement for day of week
let dayNumber = 2;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  default:
    dayName = "Unknown day";
    break;
}
console.log(`Today is ${dayName}`);

ในตัวอย่างนี้ JavaScript เห็นว่า dayNumber เป็น 2 พบ case 2 ที่ตรงกัน ตั้งค่า dayName เป็น "Tuesday" และจากนั้นก็ออกจาก switch ผลลัพธ์คือ "Today is Tuesday" ถูกแสดงในคอนโซล

✅ ทดสอบความเข้าใจของคุณเกี่ยวกับโค้ดนี้และโค้ดต่อไปนี้โดยการรันในคอนโซลของเบราว์เซอร์ เปลี่ยนค่าของตัวแปร a เพื่อเปลี่ยนค่าที่คืนใน console.log()

ตัวดำเนินการทางตรรกะและค่าบูลีน

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

ตัวดำเนินการเหล่านี้ช่วยให้คุณสร้างตรรกะเงื่อนไขที่ซับซ้อนโดยการรวมการประเมิน true/false แบบง่าย ๆ

สัญลักษณ์	คำอธิบาย	ตัวอย่าง
&&	AND ทางตรรกะ: เปรียบเทียบการแสดงออกทางบูลีนสองตัว คืนค่า true เฉพาะเมื่อ ทั้งสองด้านเป็น true	(5 > 3) && (5 < 10) // ทั้งสองด้านเป็น true คืนค่า true
||	OR ทางตรรกะ: เปรียบเทียบการแสดงออกทางบูลีนสองตัว คืนค่า true หากมีอย่างน้อยหนึ่งด้านเป็น true	(5 > 10) || (5 < 10) // ด้านหนึ่งเป็น false อีกด้านเป็น true คืนค่า true
!	NOT ทางตรรกะ: คืนค่าตรงข้ามของการแสดงออกทางบูลีน	!(5 > 10) // 5 ไม่มากกว่า 10 ดังนั้น "!" ทำให้เป็น true

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

• AND (&&) หมายถึงเงื่อนไขทั้งสองต้องเป็นจริง
• OR (||) หมายถึงอย่างน้อยหนึ่งเงื่อนไขต้องเป็นจริง
• NOT (!) เปลี่ยน true เป็น false (และในทางกลับกัน)

เงื่อนไขและการตัดสินใจด้วยตัวดำเนินการทางตรรกะ

ลองดูตัวดำเนินการทางตรรกะเหล่านี้ในตัวอย่างที่สมจริง:

let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  // Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

ในตัวอย่างนี้: เราคำนวณราคาส่วนลด 20% (640) จากนั้นประเมินว่าเงินที่เรามีอยู่ครอบคลุมทั้งราคาปกติ หรือ ราคาส่วนลดหรือไม่ เนื่องจาก 600 ครอบคลุมราคาส่วนลดที่ 640 เงื่อนไขจึงประเมินค่าเป็น true

ตัวดำเนินการปฏิเสธ

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

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

ตัวดำเนินการ ! เหมือนกับการพูดว่า "ตรงข้ามกับ..." – ถ้าบางสิ่งเป็น true ! จะทำให้มันเป็น false และในทางกลับกัน

นิพจน์แบบ Ternary

สำหรับการกำหนดค่าตามเงื่อนไขที่ง่าย JavaScript มีตัวดำเนินการ ternary ซึ่งเป็นไวยากรณ์ที่กระชับที่ช่วยให้คุณเขียนนิพจน์เงื่อนไขในบรรทัดเดียว มีประโยชน์เมื่อคุณต้องการกำหนดค่าหนึ่งในสองค่าตามเงื่อนไข

let variable = condition ? returnThisIfTrue : returnThisIfFalse;

มันอ่านเหมือนคำถาม: "เงื่อนไขนี้เป็นจริงหรือไม่? ถ้าใช่ ใช้ค่านี้ ถ้าไม่ ใช้ค่านั้น"

ด้านล่างคือตัวอย่างที่จับต้องได้มากขึ้น:

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ ใช้เวลาสักครู่เพื่ออ่านโค้ดนี้หลายครั้ง คุณเข้าใจวิธีการทำงานของตัวดำเนินการเหล่านี้หรือไม่?

นี่คือสิ่งที่บรรทัดนี้กำลังพูดว่า: "ตัวเลขแรก (firstNumber) มากกว่าตัวเลขที่สอง (secondNumber) หรือไม่? ถ้าใช่ ใส่ firstNumber ใน biggestNumber ถ้าไม่ ใส่ secondNumber ใน biggestNumber"

ตัวดำเนินการ ternary เป็นเพียงวิธีที่สั้นกว่าในการเขียนคำสั่ง if..else แบบดั้งเดิม:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

ทั้งสองวิธีให้ผลลัพธ์เหมือนกัน ตัวดำเนินการ ternary ให้ความกระชับ ในขณะที่โครงสร้าง if-else แบบดั้งเดิมอาจอ่านง่ายกว่าในกรณีที่มีเงื่อนไขซับซ้อน

---

🚀 ความท้าทาย

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

---

ความท้าทาย GitHub Copilot Agent 🚀

ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:

คำอธิบาย: สร้างโปรแกรมคำนวณเกรดที่ครอบคลุมซึ่งแสดงแนวคิดการตัดสินใจหลายอย่างจากบทเรียนนี้ รวมถึงคำสั่ง if-else, switch, ตัวดำเนินการทางตรรกะ และนิพจน์ ternary

คำสั่ง: เขียนโปรแกรม JavaScript ที่รับคะแนนตัวเลขของนักเรียน (0-100) และกำหนดเกรดตัวอักษรของพวกเขาโดยใช้เกณฑ์ต่อไปนี้:

• A: 90-100
• B: 80-89
• C: 70-79
• D: 60-69
• F: ต่ำกว่า 60

ข้อกำหนด:

1. ใช้คำสั่ง if-else เพื่อกำหนดเกรดตัวอักษร
2. ใช้ตัวดำเนินการทางตรรกะเพื่อตรวจสอบว่านักเรียนผ่าน (เกรด >= 60) และ ได้เกียรตินิยม (เกรด >= 90)
3. ใช้คำสั่ง switch เพื่อให้ข้อเสนอแนะเฉพาะสำหรับแต่ละเกรดตัวอักษร
4. ใช้ตัวดำเนินการ ternary เพื่อกำหนดว่านักเรียนมีสิทธิ์เรียนหลักสูตรถัดไปหรือไม่ (เกรด >= 70)
5. รวมการตรวจสอบข้อมูลเพื่อให้แน่ใจว่าคะแนนอยู่ระหว่าง 0 ถึง 100

ทดสอบโปรแกรมของคุณด้วยคะแนนต่าง ๆ รวมถึงกรณีขอบเช่น 59, 60, 89, 90 และข้อมูลที่ไม่ถูกต้อง

เรียนรู้เพิ่มเติมเกี่ยวกับ โหมด Agent ที่นี่

แบบทดสอบหลังเรียน

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตัวเอง

อ่านเพิ่มเติมเกี่ยวกับตัวดำเนินการที่มีให้ผู้ใช้ บน MDN

ลองดู operator lookup ที่ยอดเยี่ยมของ Josh Comeau!

งานที่ได้รับมอบหมาย

Operators

---

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้