JavaScript Ternary Operators:คำแนะนำทีละขั้นตอน

ตัวดำเนินการ ternary JavaScript ประเมินคำสั่งและส่งกลับค่าใดค่าหนึ่งจากสองค่า ตัวดำเนินการ ternary สามารถสั่งให้คืนค่าได้หากคำสั่งประเมินว่าเป็นจริงหรือเท็จ ไวยากรณ์สำหรับตัวดำเนินการ ternary คือ:statement ? if_true :if_false;.

อาจมีบางครั้งที่คุณต้องการให้โค้ดทำงานเมื่อตรงตามเงื่อนไขที่กำหนดเท่านั้น

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

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

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

ตัวดำเนินการ Ternary JavaScript คืออะไร

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

นิพจน์ไตรภาคมีไวยากรณ์ต่อไปนี้:

(condition) ? if true, then run : if false, then run

เงื่อนไขมาก่อน ตามด้วยเครื่องหมายคำถาม นิพจน์แรกจะดำเนินการหากตรงตามเงื่อนไข เงื่อนไขที่สอง เงื่อนไขที่สองจะดำเนินการหากไม่เป็นไปตามเงื่อนไข

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

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

กลับสู่พื้นฐาน:ถ้าคำสั่ง

ตัวดำเนินการตามเงื่อนไข JavaScript พื้นฐานที่สุดคือคำสั่ง “if” คำสั่งนี้อนุญาตให้รันบล็อกของรหัสตามเงื่อนไข มิฉะนั้น โปรแกรมจะดำเนินการเนื้อหาของคำสั่ง "อื่น" ที่เป็นทางเลือก

นี่คือตัวอย่างคำสั่ง if เราใช้สถานการณ์สมมติของไซต์อีคอมเมิร์ซที่ยืนยันอายุของผู้ใช้ที่เราได้พูดคุยกันก่อนหน้านี้

// Declare our customer object
let customer = {
	name: "Joe",
	age: 15
}

if (customer.age >= 18) {
	user_is_right_age = true;
} else {
	user_is_right_age = false;
}

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

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

ถ้าฉันบอกคุณว่ามีวิธีใช้งานฟังก์ชันเดียวกันนี้ในโค้ดเพียงบรรทัดเดียวล่ะ นั่นคือที่มาของตัวดำเนินการ ternary

ตัวอย่างโอเปอเรเตอร์ประกอบ JavaScript

เราสามารถลดความซับซ้อนของคำสั่ง if ก่อนหน้าโดยใช้ตัวดำเนินการ ternary:

user_is_right_age = customer.age >= 18 ? true : false;

เมื่อดำเนินการโค้ดนี้ ให้ผลลัพธ์เหมือนกับโค้ดด้านบนของเรา (เท็จ ) แต่ในบรรทัดที่น้อยลง หากเงื่อนไขเป็นจริง—หากผู้ใช้อายุ 18 ปีขึ้นไป—โปรแกรมของเราจะคืนค่าเป็น จริง .

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

ไปที่ตัวอย่างอื่น สมมติว่าเราต้องการตรวจสอบว่าลูกค้าบนเว็บไซต์ของเรามีสิทธิ์ได้รับการจัดส่งด่วนหรือไม่ เราสามารถทำได้ด้วยโอเปอเรเตอร์ ternary JavaScript:

let userIsExpressCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : 72;

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

ตัวดำเนินการ Ternary JavaScript ที่ซ้อนกัน

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

สมมติว่าเราเป็นบริษัทอีคอมเมิร์ซที่ให้บริการจัดส่งสามแบบ:มาตรฐาน (72), ด่วน (48 ชั่วโมง); และหนึ่งวัน (24 ชั่วโมง) เราจะใช้ตัวดำเนินการ ternary ได้อย่างไร ในกรณีนี้ มีสามตัวเลือก? เราควรใช้ if...else . หรือไม่ คำสั่งแทน?

ไม่ต้องกังวล คุณยังสามารถใช้ตัวดำเนินการ ternary ของ JS ที่มีสามนิพจน์ได้ นี่คือตัวอย่างการใช้งานจริงข้างต้น:

let userIsExpressCustomer = false;
let userIs24HourCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : userIs24HourCustomer ? 24 : 72;

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

หากผู้ใช้ไม่ใช่ลูกค้าแบบด่วนหรือแบบ 24 ชั่วโมง เวลาในการจัดส่งจะเท่ากับ 72 ชั่วโมง

บทสรุป

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

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

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