JavaScript Switch Case:คำแนะนำทีละขั้นตอน

ตัวพิมพ์ใหญ่ของ JavaScript คือ if else คำแถลง. มันใช้นิพจน์เงื่อนไขเช่นเดียวกับคำสั่ง if แต่สามารถมีหลายเงื่อนไข—หรือกรณี—ที่สามารถจับคู่ผลลัพธ์ของนิพจน์เพื่อรันบล็อกต่างๆ ของโค้ด

คำสั่งแบบมีเงื่อนไขเป็นส่วนสำคัญของการเขียนโปรแกรมและใช้เพื่อควบคุมการไหลของโปรแกรมคอมพิวเตอร์ รูปแบบทั่วไปของคำสั่งแบบมีเงื่อนไขใน JavaScript คือ “if” และ “if...else” บล็อกโค้ด ซึ่งสามารถใช้เพื่อเรียกใช้โค้ดได้ก็ต่อเมื่อตรงตามเงื่อนไขหรือชุดเงื่อนไขที่กำหนดเท่านั้น

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

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

ทบทวนคำสั่งเงื่อนไข JavaScript

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

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

ใน JavaScript รูปแบบทั่วไปของคำสั่งแบบมีเงื่อนไขคือ “if” คำแถลง. “if” คำสั่งประเมินว่าคำสั่งนั้นจริงหรือเท็จ และรันก็ต่อเมื่อคำสั่งนั้นประเมินว่าเป็นจริงเท่านั้น นี่คือตัวอย่างคำสั่ง if ใน JavaScript:

var age = 17;

if (age >= 16) {
	console.log("You are aged 16 or over!");
}

เมื่อเราเรียกใช้โค้ดของเรา ผลลัพธ์ต่อไปนี้จะถูกส่งกลับ:“You are aged 16 or over!”

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

“if” คำสั่งยังมาพร้อมกับ “else if” คำสั่งที่ใช้ตรวจสอบหลายเงื่อนไขได้ หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับคำสั่ง if และ else ของ JavaScript คุณสามารถทำได้โดยทำตามบทช่วยสอนของเราในเรื่อง "if…else"

ตอนนี้เรารู้พื้นฐานของคำสั่งแบบมีเงื่อนไขใน JavaScript แล้ว เราสามารถสำรวจ “switch case” คำแถลง.

JavaScript Switch Case

JavaScript “switch” คำสั่งประเมินคำสั่งและรันบล็อกของรหัสถ้าคำสั่งนั้นประเมินเป็นจริง “switch” คำสั่งทำงานในลักษณะเดียวกับ “if” คำสั่งที่ตรวจสอบว่าคำสั่งนั้นเป็นจริงหรือไม่ และรันคำสั่งนั้นว่าเป็นจริงหรือไม่

“switch” คำสั่งถูกเขียนโดยใช้ไวยากรณ์ต่อไปนี้:

switch (statement) {
	case a:
		// Run code
		break;
	case b:
		// Run code
		break;
	default:
		// Run code
		break;
};

มีหลายอย่างเกิดขึ้นที่นี่ ดังนั้นเรามาทำลายมันกันเถอะ นี่คือขั้นตอนที่โปรแกรมของเราจะปฏิบัติตามเมื่ออ่าน “switch” คำแถลง:

• นิพจน์สวิตช์จะถูกประเมินเมื่อรันคำสั่ง
• ค่าของคำสั่งจะถูกเปรียบเทียบกับแต่ละกรณี
• ถ้ากรณีและปัญหาตรงกับคำสั่งของเรา บล็อกของรหัสที่เกี่ยวข้องจะถูกเรียกใช้
• ถ้าไม่ตรงกับกรณีของเรา รหัสใน “default” case block จะดำเนินการ

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

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

const drink_name = "Americano";

switch (drink_name) {
	case "Americano":
		console.log("The price of an Americano is $2.60");
		break;
	case "Cappuccino":
		console.log("The price of a cappuccino is $2.75");
		break;
	case "Macchiato":
		console.log("The price of a macchiato is $3.00");
		break;
	case "Espresso":
		console.log("The price of an espresso is $2.40");
		break;
	default:
		console.log("This drink is not available");
}

เมื่อเรารันโปรแกรมด้วยตัวแปร “drink_name” เท่ากับ “Americano,” ต่อไปนี้จะถูกส่งคืน:

The price of an Americano is $2.60.


ถ้าเราตั้ง “drink_name” เพื่อให้เท่ากับเครื่องดื่มอื่น ราคาที่สอดคล้องกันสำหรับเครื่องดื่มนั้นจะปรากฏขึ้น นอกจากนี้ หากเราป้อนชื่อเครื่องดื่มที่ไม่ถูกต้อง รหัสของเราก็จะส่งคืนเนื้อหาของ “default” ซึ่งในกรณีนี้เป็นข้อความที่ระบุว่า “This drink is not available.”

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

JavaScript สลับหลายกรณี

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

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

เราจะใช้ตัวอย่างข้างต้นเพื่อแสดงวิธีใช้หลายกรณี อย่างไรก็ตาม ในตัวอย่างนี้ เราจะเปลี่ยน “The price of [drink name] is [price].” to “The price of this drink is [price].” เพื่อให้เราสามารถนำคำสั่ง console.log() กลับมาใช้ใหม่ได้

นอกจากนี้ เรายังจะเพิ่มเครื่องดื่มใหม่ 2 ชนิด ได้แก่ ลาเต้และมอคค่า โดยแต่ละรายการมีราคาอยู่ที่ 3.00 ดอลลาร์สหรัฐฯ (เท่ากับมัคคิอาโต)

นี่คือรหัสที่แก้ไขของเราซึ่งรวมถึงเครื่องดื่มใหม่ของเรา:

const drink_name = "Mocha";

switch (drink_name) {
	case "Americano":
		console.log("The price of this drink is $2.60");
		break;
	case "Cappuccino":
		console.log("The price of this drink is $2.75");
		break;
	case "Latte":
	case "Mocha":
	case "Macchiato":
		console.log("The price of this drink is $3.00");
		break;
	case "Espresso":
		console.log("The price of this drink is $2.40");
		break;
	default:
		console.log("This drink is not available");
}

เมื่อเรารันโค้ดด้านบนด้วย “drink_name” ตัวแปรเท่ากับ “Mocha,” ตอบกลับต่อไปนี้จะถูกส่งกลับ:

The price of this drink is $3.00.


อย่างที่คุณเห็น โปรแกรมของเราพบว่า “Mocha” อยู่ในรายการเป็นกรณีและได้เรียกใช้โค้ดในบล็อกที่เกี่ยวข้อง

บทสรุป

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

ในบทช่วยสอนนี้ เราได้พูดถึงพื้นฐานของคำสั่งแบบมีเงื่อนไขใน JavaScript จากนั้นเราก็สำรวจวิธีการใช้ “switch” และ “case” และยกตัวอย่างวิธีการใช้ “case” คำสั่งใน “switch” บล็อก.

ตอนนี้คุณมีข้อมูลที่จำเป็นในการใช้คำสั่ง "switch case" ของ JavaScript อย่างผู้เชี่ยวชาญแล้ว!