JavaScript หากเป็นอย่างอื่น:คำแนะนำทีละขั้นตอน

คำสั่ง JavaScript if...else จะประเมินว่าเงื่อนไขเป็นจริงหรือเท็จ หากมีเงื่อนไข ถูกดำเนินการ รหัสภายในบล็อก if ดำเนินการ มิฉะนั้น เนื้อหาของบล็อกอื่นจะดำเนินการ มิฉะนั้น…หากคำสั่งอนุญาตให้คุณประเมินหลายเงื่อนไขได้

จะมีบางครั้งที่คุณต้องการให้บล็อกโค้ดทำงานต่างกัน ขึ้นอยู่กับปัจจัยบางประการ

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

ในบทช่วยสอนนี้ เราจะมาดูวิธีใช้ if...else คำสั่งในรหัสของเรา

ทบทวนคำชี้แจงเงื่อนไข

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

• ตรวจสอบว่ารหัสผ่านของผู้ใช้ตรงกับรหัสผ่านในไฟล์หรือไม่
• ตรวจสอบว่าผู้ใช้มีบัญชีอยู่ภายใต้ที่อยู่อีเมลบางรายการหรือไม่
• ส่งแบบฟอร์มหากกรอกข้อมูลครบทุกช่อง
• แสดงรายการส่วนลดวันหยุดหากผู้ใช้ลงชื่อเข้าใช้

กุญแจสำคัญของตัวอย่างเหล่านี้คือพวกเขาใช้คำว่า if . ถ้ามีอะไรเกิดขึ้น ก็ต้องมีอย่างอื่นเกิดขึ้น มาดูกันว่าเราจะใช้ตรรกะเดียวกันนี้ใน JavaScript ได้อย่างไร

JavaScript ถ้าคำสั่ง

JavaScript ถ้า คำสั่งประเมินว่าคำสั่งเป็นจริงหรือเท็จ คำสั่ง if จะทำงานก็ต่อเมื่อคำสั่งนั้นเป็นจริงเท่านั้น หากข้อความเป็นเท็จจะไม่มีอะไรเกิดขึ้น

ถ้า คำสั่งใช้ if คำสำคัญ. หลังจากคำสั่ง if คุณควรระบุเงื่อนไข—หรือชุดของเงื่อนไข—ในวงเล็บปีกกาปกติ เนื้อหาของคำสั่ง if และ else ปรากฏอยู่ในวงเล็บปีกกา

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

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

นี่คือไวยากรณ์สำหรับคำสั่ง if ใน JavaScript:

if (ourConditions) {
	// The code that will execute if ourConditions are true
}

ถ้าตัวอย่างคำสั่ง JavaScript

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

const userAge = 15;

if (userAge < 16) {
	console.log("You are not old enough to make a purchase!");
}

รหัสของเราส่งคืนดังต่อไปนี้:

You are not old enough to make a purchase!

โดยใช้ตัวดำเนินการน้อยกว่า เราตรวจสอบว่าผู้ใช้ของเรามีอายุน้อยกว่า 16 หรือไม่ ผู้ใช้ของเราคือ 15 ซึ่งหมายความว่า userAge <16 เป็นความจริง. รหัสภายในของเรา ถ้า คำสั่งทำงาน

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

JavaScript ถ้า…คำสั่งอื่น

คำสั่ง JavaScript if...else จะประเมินว่าเงื่อนไขมีค่าเท่ากับ true หรือไม่ หากเงื่อนไขเท่ากับเท็จ คำสั่ง else จะดำเนินการ มิฉะนั้น เนื้อหาของคำสั่ง “if” จะทำงาน

ไวยากรณ์สำหรับคำสั่ง if…else คือ:

if (ourCondition) {
	// Code will execute if the condition is true
} else {
	// Code will execute if the condition is false
}

คำสั่ง else จะปรากฏตามหลังเงื่อนไข if ทั้งหมดในคำสั่ง คำสั่งอื่นเท่านั้นที่สามารถปรากฏในคำสั่ง if ได้

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript จริงและเท็จ โปรดอ่านคำแนะนำเกี่ยวกับ JavaScript Boolean

ถ้า…ตัวอย่าง JavaScript อื่น

ลองใช้ตัวอย่างเดียวกันจากการสนทนา if statement ที่เราตรวจสอบอายุของผู้ใช้ เราจะเพิ่ม อื่นๆ คำสั่งเพื่อแจ้งให้ผู้ใช้ทราบว่าการซื้อของพวกเขากำลังจะผ่านไป

const userAge = 17;

if (userAge < 16) {
	console.log("You are not old enough to make a purchase!");
} else {
	console.log("Your purchase is being processed.");
}

รหัสของเราส่งคืนสิ่งต่อไปนี้:

Your purchase is being processed.

เราประกาศตัวแปร JavaScript ที่เรียกว่า “age” ซึ่งติดตามอายุของผู้ใช้ของเรา เนื่องจากผู้ใช้ของเรามีอายุมากกว่า 16 โค้ดจึงข้าม if คำสั่งและดำเนินการ else ข้อ หากผู้ใช้ของเราอายุ 12 ปี รหัสภายใน else . ของเรา ประโยคจะไม่ทำงาน

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

JavaScript อื่น…หากคำสั่ง

JavaScript else…if คำสั่งประเมินว่าเงื่อนไขใดเงื่อนไขหนึ่งเป็นจริงหรือไม่ แต่ละคำสั่ง if...else จะประเมินเงื่อนไขใหม่ หากไม่เป็นไปตามเงื่อนไขจะไม่มีอะไรเกิดขึ้น

นี่คือไวยากรณ์สำหรับการใช้คำสั่ง else…if หลายรายการ:

if (condition one) {
	// Code will run if condition one is true
} else if (condition two) {
	// Code will run if condition two is true
} else {
	// Code will run if all the above conditions are false
}

โปรแกรมของเราจะรันคำสั่งทั้งหมดตามลำดับ เริ่มด้วยเงื่อนไขที่หนึ่ง และหากไม่มีข้อความใดที่เป็นจริง โค้ดภายใน else ของเรา บล็อกจะทำงาน

เราได้ระบุอย่างอื่น…ถ้าคำสั่ง คุณสามารถใช้คำสั่ง if อื่นๆ ได้มากเท่าที่คุณต้องการกับคำสั่ง if ภายในแต่ละคำสั่งคุณควรระบุรหัสที่จะดำเนินการหากตรงตามเงื่อนไขนั้น ๆ

อย่างอื่น…ถ้าตัวอย่าง JavaScript

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

• อายุไม่เกิน 10 ปี:$5
• อายุ 11-17:$8
• อายุ 18-64:$12
• อายุ 65+:$8

นี่คือตัวอย่างโปรแกรมที่จะตรวจสอบอายุของลูกค้าและส่งคืนราคาที่ควรจ่ายสำหรับตั๋ว:

var age = 27;
var ticketPrice = 0;

if (age <= 10) {
	var ticketPrice = 5;
} else if (age >= 11 && age <= 17) {
var ticketPrice = 8;
} else if (age >= 18 && age <= 64) {
	var ticketPrice = 12;
} else {
	var ticketPrice = 8;
}

console.log(ticketPrice);

รหัสของเราส่งคืนดังต่อไปนี้:12.

เราตรวจสอบว่าผู้ใช้อายุเท่ากับ 10 หรือต่ำกว่า 10 หลังจากนั้น เราจะตรวจสอบว่าผู้ใช้ของเรามีอายุระหว่าง 11 ถึง 17 ปี จากนั้นเราจะตรวจสอบว่าผู้ใช้มีอายุระหว่าง 18 ถึง 64 ปี เนื่องจากผู้ใช้ของเรา อายุ 27 โค้ดในบล็อกนั้นทำงาน ดังนั้นราคาตั๋วจึงกลายเป็น 12 เหรียญ

บทสรุป

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

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

หากคุณกำลังมองหาแหล่งข้อมูลการเรียนรู้เพิ่มเติมและคำแนะนำเกี่ยวกับหลักสูตร JavaScript ชั้นนำ โปรดอ่านคู่มือ How to Learn JavaScript