งบเงื่อนไขใน Javaสคริปต์: if, else และ else if

Javaคำสั่งเงื่อนไขสคริปต์

ประโยคเงื่อนไขส่วนใหญ่มีสามประเภท Javaต้นฉบับ.

1. ถ้างบ: คำสั่ง 'if' รันโค้ดตามเงื่อนไข
2. ถ้า…อย่างอื่นคำสั่ง: คำสั่ง if…else ประกอบด้วยโค้ดสองช่วงตึก เมื่อเงื่อนไขเป็นจริง จะดำเนินการบล็อกแรกของโค้ด และเมื่อเงื่อนไขเป็นเท็จ จะดำเนินการบล็อกที่สองของโค้ด
3. คำสั่ง if…else if…else: เมื่อจำเป็นต้องทดสอบหลายเงื่อนไขและจำเป็นต้องดำเนินการบล็อกโค้ดที่แตกต่างกันตามเงื่อนไขที่เป็นจริง จะใช้คำสั่ง if…else if…else

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

วิธีการใช้คำสั่งเงื่อนไข

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

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

ถ้า Statement

ไวยากรณ์:

if(condition)
{
	lines of code to be executed if condition is true
}

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

ลองด้วยตัวเอง:

<html>
<head>
	<title>IF Statments!!!</title>
	<script type="text/javascript">
		var age = prompt("Please enter your age");
		if(age>=18)
		document.write("You are an adult <br />");
		if(age<18)
		document.write("You are NOT an adult <br />");
	</script>
</head>
<body>
</body>
</html>

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

เทียบเท่าในยุคปัจจุบัน: โค้ดด้านบนยังคงเหมือนเดิมทุกประการตามที่เผยแพร่ไว้ ในเวอร์ชันปัจจุบัน Javaสคริปต์ที่มีตรรกะเดียวกันนี้โดยปกติจะเขียนด้วย let or const แทน varและ console.log() or textContent แทน document.write()และไม่มี type="text/javascript" แอตทริบิวต์ ซึ่ง HTML5 กำหนดให้เป็นตัวเลือก

คำสั่ง If…El

ไวยากรณ์:

if(condition)
{
	lines of code to be executed if the condition is true
}
else
{
	lines of code to be executed if the condition is false
}

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

ลองด้วยตัวเอง:

<html>
<head>
	<title>If...Else Statments!!!</title>
	<script type="text/javascript">
		// Get the current hours
		var hours = new Date().getHours();
		if(hours<12)
		document.write("Good Morning!!!<br />");
		else
		document.write("Good Afternoon!!!<br />");
	</script>
</head>
<body>
</body>
</html>

Here new Date().getHours() ฟังก์ชันนี้จะส่งคืนค่าเวลาปัจจุบันของนาฬิกาในเบราว์เซอร์เป็นตัวเลขตั้งแต่ 0 ถึง 23 ค่าใดๆ ที่ต่ำกว่า 12 จะแสดงคำทักทายตอนเช้า และค่าอื่นๆ ทั้งหมดจะถูกส่งต่อไปยังหน้าจออื่น else สาขา.

คำสั่ง If…Elif If…Else

ไวยากรณ์:

if(condition1)
{
	lines of code to be executed if condition1 is true
}
else if(condition2)
{
	lines of code to be executed if condition2 is true
}
else
{
	lines of code to be executed if condition1 is false and condition2 is false
}

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

ลองด้วยตัวเอง:

<html>
<head>
	<script type="text/javascript">
		var one = prompt("Enter the first number");
		var two = prompt("Enter the second number");
		one = parseInt(one);
		two = parseInt(two);
		if (one == two)
			document.write(one + " is equal to " + two + ".");
		else if (one<two)
			document.write(one + " is less than " + two + ".");
		else
			document.write(one + " is greater than " + two + ".");
	</script>
</head>
<body>
</body>
</html>

โปรดสังเกตการเรียกสองครั้งไปยัง parseInt()ค่าที่ส่งคืนโดย prompt() เนื่องจากเป็นสตริง ดังนั้นการเปรียบเทียบโดยไม่แปลงค่าจะเป็นการเปรียบเทียบข้อความแทนที่จะเป็นตัวเลข และจะรายงานว่า "9" มากกว่า "10"

สามชั้น Operator: ตัวย่อสำหรับ if…else

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

// if...else form
let message;
if (age >= 18) {
  message = "adult";
} else {
  message = "minor";
}

// same decision as a ternary expression
let label = age >= 18 ? "adult" : "minor";

ใช้ตัวดำเนินการแบบเทอร์นารีเมื่อช่วยให้อ่านง่ายขึ้น ไม่ใช่เพียงเพื่อประหยัดบรรทัด:

• พอดี: เลือกค่าใดค่าหนึ่งจากสองค่าเพื่อกำหนด ส่งคืน หรือแทรกเข้าไปในสตริงแม่แบบ
• ไม่เหมาะสม: สาขาที่รันคำสั่งหลายคำสั่ง เรียกฟังก์ชันเพื่อผลข้างเคียง หรือต้องการตัวแปรเฉพาะที่ของตัวเอง
• หลีกเลี่ยงการวางซ้อนกัน: แผนภูมิสามเหลี่ยมซ้อนแผนภูมิสามเหลี่ยมนั้นอ่านยากกว่าแผนภูมิสามเหลี่ยมธรรมดามาก else if เชื่อมต่อ.

คำสั่ง switch กับ if…else if…else

เป็นเวลานาน else if โดยทั่วไปแล้ว การเปรียบเทียบตัวแปรเดียวกันกับค่าคงที่ต่างๆ ที่เกิดขึ้นอย่างต่อเนื่อง จะเข้าใจได้ง่ายกว่าหากใช้รูปแบบดังนี้ switch คำสั่ง switch จะประเมินนิพจน์หนึ่งครั้ง จากนั้นจึงกระโดดไปยังเงื่อนไขที่ตรงกัน case; break ป้องกันไม่ให้การดำเนินการตกหล่นไปสู่คดีถัดไป และ default มีบทบาทในตอนจบ else.

switch (day) {
  case "Sat":
  case "Sun":
    document.write("Weekend");
    break;
  default:
    document.write("Weekday");
}

โครงสร้างทั้งสองแบบไม่สามารถใช้แทนกันได้ในทุกสถานการณ์:

ค่าความจริงและค่าเท็จใน Javaเงื่อนไขสคริปต์

เงื่อนไขไม่จำเป็นต้องเป็นการเปรียบเทียบเสมอไป Javaสคริปต์จะแปลงสิ่งที่พบภายในวงเล็บให้เป็นค่าบูลีนก่อน ซึ่งเป็นเหตุผลว่าทำไม if (name) เป็นโค้ดที่ถูกต้อง มีเพียงหกค่าเท่านั้นที่จะแปลงเป็นค่าเท็จ: false, 0สตริงว่างเปล่า null, undefinedและ NaNทุกอย่างอื่นเป็นค่าความจริง รวมถึงสตริงด้วย "0"อาร์เรย์ว่าง และอ็อบเจ็กต์ว่าง

ข้อผิดพลาดเกี่ยวกับเงื่อนไขส่วนใหญ่ในสคริปต์สำหรับผู้เริ่มต้น มักเกิดจากข้อผิดพลาดเพียงไม่กี่ข้อดังนี้:

• การกำหนดค่าแทนการเปรียบเทียบ: if (x = 5) กำหนดค่าและเป็นค่าความจริงเสมอ; if (x === 5) เปรียบเทียบ
• ความประหลาดใจจากความไม่เท่าเทียมกันที่ไม่ชัดเจน: == แปลงประเภทก่อนเปรียบเทียบ ดังนั้น "" == 0 เป็นความจริง ชอบมากกว่า ===.
• เหล็กดัดฟันหายไป: ไม่มี {} มีเพียงคำสั่งเดียวถัดไปเท่านั้นที่อยู่ในสาขานั้น เหมือนกับตัวอย่างข้างต้นทุกประการ
• ข้อมูลที่ยังไม่ได้แปลง: ค่าจาก prompt() และช่องกรอกข้อมูลเป็นสตริงจนกว่า parseInt() or Number() เปลี่ยนพวกเขา
• กิ่งไม้ที่เข้าไม่ถึง: ใน else if ลำดับขั้น ควรวางเงื่อนไขที่แคบที่สุดไว้ก่อน หรือหากการทดสอบที่กว้างกว่าทำก่อน ก็จะชนะเสมอ

คำถามที่พบบ่อย