การแตกแขนงแบบมีเงื่อนไข: ถ้า, '?'

บางครั้งเราจำเป็นต้องดำเนินการที่แตกต่างกันตามเงื่อนไขที่แตกต่างกัน

ในการทำเช่นนั้น เราสามารถใช้คำสั่ง if และตัวดำเนินการแบบมีเงื่อนไข ? ซึ่งเรียกอีกอย่างว่าโอเปอเรเตอร์ "เครื่องหมายคำถาม"

คำสั่ง "ถ้า"

คำสั่ง if(...) จะประเมินเงื่อนไขในวงเล็บ และหากผลลัพธ์เป็น true จะดำเนินการบล็อกของโค้ด

ตัวอย่างเช่น:

 la year = prompt('ข้อกำหนด ECMAScript-2015 ได้รับการเผยแพร่ในปีใด?', '');

if (ปี == 2015) alert( 'คุณพูดถูก!' );

ในตัวอย่างข้างต้น เงื่อนไขคือการตรวจสอบความเท่าเทียมกันอย่างง่าย ( year == 2015 ) แต่อาจซับซ้อนกว่านั้นมาก

หากเราต้องการดำเนินการมากกว่าหนึ่งคำสั่ง เราต้องล้อมบล็อกโค้ดของเราไว้ในวงเล็บปีกกา:

 ถ้า (ปี == 2558) {
  alert( "ถูกต้อง!" );
  alert( "คุณฉลาดมาก!" );
-

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

การแปลงบูลีน

คำสั่ง if (…) จะประเมินนิพจน์ในวงเล็บและแปลงผลลัพธ์เป็นบูลีน

มาจำกฎการแปลงจากบทประเภทการแปลง:

• หมายเลข 0 , สตริงว่าง "" , null , undefined และ NaN ทั้งหมดกลายเป็น false ด้วยเหตุนี้จึงเรียกว่าค่า "เท็จ"

• ค่าอื่นๆ เป็น true จึงเรียกว่า "ความจริง"

ดังนั้นโค้ดภายใต้เงื่อนไขนี้จะไม่ดำเนินการ:

 ถ้า (0) { // 0 เป็นเท็จ
  -
-

…และภายใต้เงื่อนไขนี้ – มันจะเป็นเช่นนั้นเสมอ:

 ถ้า (1) { // 1 เป็นความจริง
  -
-

นอกจากนี้เรายังสามารถส่งค่าบูลีนที่ประเมินไว้ล่วงหน้าไปที่ if เช่นนี้:

 ให้ cond = (ปี == 2015); // ความเท่าเทียมกันประเมินเป็นจริงหรือเท็จ

ถ้า (เงื่อนไข) {
  -
-

ประโยค "อื่น ๆ "

คำสั่ง if อาจมีบล็อก else ที่เป็นทางเลือก มันดำเนินการเมื่อเงื่อนไขเป็นเท็จ

ตัวอย่างเช่น:

 la year = prompt('ข้อกำหนด ECMAScript-2015 ได้รับการเผยแพร่ในปีใด?', '');

ถ้า (ปี == 2558) {
  alert( 'คุณเดาถูกแล้ว!' );
} อื่น {
  alert( 'คุณผิดได้ยังไง?' ); // ค่าใดๆ ยกเว้น 2015
-

เงื่อนไขหลายประการ: “else if”

บางครั้ง เราต้องการทดสอบเงื่อนไขหลายรูปแบบ else if clause ช่วยให้เราทำเช่นนั้นได้

ตัวอย่างเช่น:

 la year = prompt('ข้อกำหนด ECMAScript-2015 ได้รับการเผยแพร่ในปีใด?', '');

ถ้า (ปี < 2558) {
  alert( 'เร็วเกินไป...' );
} อื่นถ้า (ปี > 2015) {
  alert( 'สายเกินไป' );
} อื่น {
  alert( 'แน่นอน!' );
-

ในโค้ดด้านบน JavaScript จะตรวจสอบ year < 2015 ก่อน หากเป็นเท็จ จะไปที่เงื่อนไขถัดไป year > 2015 หากนั่นเป็นเท็จ ก็จะแสดง alert ครั้งล่าสุด

อาจมี else if บล็อก สุดท้าย else เป็นทางเลือก

โอเปอเรเตอร์แบบมีเงื่อนไข '?'

บางครั้งเราจำเป็นต้องกำหนดตัวแปรตามเงื่อนไข

ตัวอย่างเช่น:

 ให้ accessAllowed;
ให้อายุ = prompt('คุณอายุเท่าไหร่', '');

ถ้า (อายุ > 18) {
  อนุญาตการเข้าถึง = จริง;
} อื่น {
  อนุญาตการเข้าถึง = เท็จ;
-

การแจ้งเตือน (อนุญาตการเข้าถึง);

ตัวดำเนินการที่เรียกว่า "เงื่อนไข" หรือ "เครื่องหมายคำถาม" ช่วยให้เราทำสิ่งนั้นได้ในวิธีที่สั้นและง่ายกว่า

ตัวดำเนินการจะแสดงด้วยเครื่องหมายคำถาม ? - บางครั้งเรียกว่า "ternary" เนื่องจากตัวดำเนินการมีตัวถูกดำเนินการสามตัว จริงๆ แล้วมันเป็นโอเปอเรเตอร์ตัวเดียวใน JavaScript ซึ่งมีมากมายขนาดนั้น

ไวยากรณ์คือ:

 ให้ผลลัพธ์ = เงื่อนไข ? ค่า1 : ค่า2;

condition ได้รับการประเมิน: หากเป็นจริง value1 จะถูกส่งกลับ มิฉะนั้น – value2

ตัวอย่างเช่น:

 ให้ accessAllowed = (อายุ > 18) ? จริง : เท็จ;

ในทางเทคนิคแล้ว เราสามารถละเว้นวงเล็บเมื่อ age > 18 ปี ได้ โอเปอเรเตอร์เครื่องหมายคำถามมีลำดับความสำคัญต่ำ ดังนั้นจึงดำเนินการหลังจากการเปรียบเทียบ >

ตัวอย่างนี้จะทำสิ่งเดียวกันกับตัวอย่างก่อนหน้า:

 // ตัวดำเนินการเปรียบเทียบ "อายุ > 18" จะดำเนินการก่อน
// (ไม่ต้องใส่วงเล็บ)
ให้ accessAllowed = อายุ > 18 ? จริง : เท็จ;

แต่วงเล็บจะทำให้โค้ดอ่านง่ายขึ้น ดังนั้นเราจึงแนะนำให้ใช้วงเล็บเหล่านี้

โปรดทราบ:

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

 //เหมือนกัน
ให้ accessAllowed = อายุ > 18;

หลายรายการ '?'

ลำดับของตัวดำเนินการเครื่องหมายคำถาม ? สามารถคืนค่าที่ขึ้นอยู่กับเงื่อนไขมากกว่าหนึ่งเงื่อนไข

ตัวอย่างเช่น:

 ให้อายุ = prompt('age?', 18);

ให้ข้อความ = (อายุ < 3) ? 'สวัสดีที่รัก!' -
  (อายุ < 18) ? 'สวัสดี!' -
  (อายุ < 100) ? 'สวัสดี!' -
  'อายุไม่ธรรมดาจริงๆ!';

แจ้งเตือน( ข้อความ );

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

1. เครื่องหมายคำถามแรกตรวจสอบว่า age < 3 หรือไม่

2. หากเป็นจริง – จะส่งกลับ 'Hi, baby!' - มิฉะนั้น จะยังคงแสดงต่อไปหลังเครื่องหมายทวิภาค “:” โดยตรวจสอบ age < 18 .

3. หากเป็นจริง – จะส่งกลับ 'Hello!' - มิฉะนั้น จะยังคงแสดงต่อไปหลังเครื่องหมายทวิภาคถัดไป “:” โดยตรวจสอบ age < 100

4. หากเป็นเช่นนั้นจริง ระบบจะส่งกลับข้อความ 'Greetings!' - มิฉะนั้น จะยังคงแสดงต่อไปหลังเครื่องหมายทวิภาคสุดท้าย “:” ส่งคืน 'What an unusual age!' -

นี่คือลักษณะการใช้ if..else :

 ถ้า (อายุ < 3) {
  message = 'สวัสดีที่รัก!';
} อื่นถ้า (อายุ < 18) {
  ข้อความ = 'สวัสดี!';
} อื่นถ้า (อายุ < 100) {
  message = 'สวัสดี!';
} อื่น {
  message = 'ช่างเป็นวัยที่ไม่ธรรมดาจริงๆ!';
-

การใช้ '?' ที่ไม่ใช่แบบดั้งเดิม

บางครั้งเครื่องหมายคำถาม ? ใช้แทน if :

 ให้ company = prompt('บริษัทไหนสร้าง JavaScript?', '');

(บริษัท == 'เน็ตสเคป') ?
   alert('ถูกต้อง!') : alert('ผิด');

ขึ้นอยู่กับเงื่อนไข company == 'Netscape' ไม่ว่าจะเป็นนิพจน์แรกหรือที่สองหลังจาก ? ได้รับการดำเนินการและแสดงการแจ้งเตือน

เราไม่ได้กำหนดผลลัพธ์ให้กับตัวแปรที่นี่ แต่เรารันโค้ดที่แตกต่างกันไปตามเงื่อนไข

ไม่แนะนำให้ใช้โอเปอเรเตอร์เครื่องหมายคำถามในลักษณะนี้

สัญกรณ์จะสั้นกว่าคำสั่ง if ที่เทียบเท่า ซึ่งดึงดูดใจโปรแกรมเมอร์บางคน แต่อ่านได้น้อย

นี่คือรหัสเดียวกันที่ใช้ if เพื่อเปรียบเทียบ:

 ให้ company = prompt('บริษัทไหนสร้าง JavaScript?', '');

ถ้า (บริษัท == 'Netscape') {
  alert('ถูกต้อง!');
} อื่น {
  alert('ผิด');
-

ดวงตาของเราสแกนโค้ดในแนวตั้ง บล็อกโค้ดที่ขยายหลายบรรทัดจะเข้าใจได้ง่ายกว่าชุดคำสั่งแนวนอนที่ยาว

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

งาน

ถ้า (สตริงที่มีศูนย์)

ความสำคัญ: 5

alert จะแสดงหรือไม่?

 ถ้า ("0") {
  alert( 'สวัสดี' );
-

สารละลาย

ใช่แล้ว มันจะเป็นเช่นนั้น

สตริงใดๆ ยกเว้นสตริงว่าง (และ "0" ไม่ว่างเปล่า) จะกลายเป็น true ในบริบทเชิงตรรกะ

เราสามารถเรียกใช้และตรวจสอบ:

 ถ้า ("0") {
  alert( 'สวัสดี' );
-

ชื่อของจาวาสคริปต์

ความสำคัญ: 2

ใช้โครงสร้าง if..else เขียนโค้ดที่ถามว่า: 'ชื่อ JavaScript "อย่างเป็นทางการ" คืออะไร?

หากผู้เยี่ยมชมป้อน “ECMAScript” ให้ส่งออก “Right!” มิฉะนั้น – ส่งออก: “คุณไม่รู้เหรอ? ECMAScript!”

การสาธิตในหน้าต่างใหม่

สารละลาย

 <!DOCTYPE html>
<html>

<ร่างกาย>
  <สคริปต์>
    'ใช้อย่างเข้มงวด';

    ให้ค่า = prompt ('ชื่อ JavaScript "อย่างเป็นทางการ" คืออะไร?', '');

    ถ้า (ค่า == 'ECMAScript') {
      alert('ถูกต้อง!');
    } อื่น {
      alert("คุณไม่รู้เหรอ? ECMAScript!");
    -
  </สคริปต์>


</ร่างกาย>

</html>

แสดงป้าย

ความสำคัญ: 2

ใช้ if..else เขียนโค้ดที่ได้รับตัวเลขผ่าน prompt จากนั้นแสดงใน alert :

• 1 ถ้าค่ามากกว่าศูนย์

• -1 ถ้าน้อยกว่าศูนย์

• 0 ถ้าเท่ากับศูนย์

ในงานนี้ เราถือว่าข้อมูลที่ป้อนเป็นตัวเลขเสมอ

การสาธิตในหน้าต่างใหม่

สารละลาย

 ให้ value = prompt('พิมพ์ตัวเลข', 0);

ถ้า (ค่า > 0) {
  การแจ้งเตือน( 1 );
} อื่นถ้า (ค่า < 0) {
  การแจ้งเตือน( -1 );
} อื่น {
  การแจ้งเตือน( 0 );
-

เขียนใหม่ 'ถ้า' เป็น '?'

ความสำคัญ: 5

เขียนสิ่งนี้ใหม่ if ใช้ตัวดำเนินการแบบมีเงื่อนไข '?' -

 ให้ผล;

ถ้า (ก + ข < 4) {
  ผลลัพธ์ = 'ด้านล่าง';
} อื่น {
  ผลลัพธ์ = 'เกิน';
-

สารละลาย

 ให้ผลลัพธ์ = (a + b < 4) ? 'ด้านล่าง' : 'มากกว่า';

เขียนใหม่ 'if..else' เป็น '?'

ความสำคัญ: 5

เขียนใหม่ if..else โดยใช้ตัวดำเนินการแบบไตรภาคหลายตัว '?' -

เพื่อให้อ่านง่าย แนะนำให้แบ่งโค้ดออกเป็นหลายบรรทัด

 ให้ข้อความ;

ถ้า (เข้าสู่ระบบ == 'พนักงาน') {
  ข้อความ = 'สวัสดี';
} อื่นถ้า (เข้าสู่ระบบ == 'ผู้อำนวยการ') {
  ข้อความ = 'สวัสดี';
} อื่นถ้า (เข้าสู่ระบบ == '') {
  ข้อความ = 'ไม่มีการเข้าสู่ระบบ';
} อื่น {
  ข้อความ = '';
-

สารละลาย

 ให้ข้อความ = (เข้าสู่ระบบ == 'พนักงาน') ? 'สวัสดี' :
  (เข้าสู่ระบบ == 'ผู้อำนวยการ') ? 'สวัสดี' :
  (เข้าสู่ระบบ == '') ? 'ไม่มีการเข้าสู่ระบบ' :
  -