Nhiều điều kiện trong JavaScript toán tử bậc ba

Khi bạn đang tạo điều kiện trong mã JavaScript của mình, hầu hết thời gian, bạn đang sử dụng các câu lệnh truyền thống if, else và

// JavaScript traditional statement:
if (something) {
  console.log('Yes')
} else {
  console.log('No')
}

// JavaScript ternary statement:
something ? console.log('Yes') : console.log('No')
// [condition] ? [if] : [else]

Nhờ toán tử điều kiện trong JavaScript (còn gọi là toán tử bậc ba), bạn sẽ viết được câu lệnh tốc ký if else

Nếu bạn thích nội dung video ngắn, bài viết này cũng có sẵn trên Youtube. 🎥

Cú pháp toán tử điều kiện (ba ngôi)

Điều kiện bậc ba trong JavaScript được đại diện bởi

// JavaScript traditional statement:
if (something) {
  console.log('Yes')
} else {
  console.log('No')
}

// JavaScript ternary statement:
something ? console.log('Yes') : console.log('No')
// [condition] ? [if] : [else]

const name = 'Julien'

// JavaScript if else shorthand:
const color = name === 'Julien' ? 'blue' : 'green'
// if the variable `name` is equals to "Julien" the colour is "blue" otherwise it's "green"

console.log(color)
// Output: "blue"

Nếu bạn muốn hiểu nó hoạt động như thế nào, bạn có thể so sánh nó với một câu lệnh JavaScript ngắn if else

// JavaScript traditional statement:
if (something) {
  console.log('Yes')
} else {
  console.log('No')
}

// JavaScript ternary statement:
something ? console.log('Yes') : console.log('No')
// [condition] ? [if] : [else]

Tóm lại, toán tử điều kiện trong JavaScript là viết tắt của if else

Dưới đây, bạn sẽ tìm thấy các ví dụ để hiểu cách thức và thời điểm sử dụng toán tử điều kiện này

JavaScript viết tắt if other

Mã dưới đây là trường hợp sử dụng phổ biến nhất. Nó xảy ra khi bạn có một điều kiện ngắn và bạn muốn giữ cho mã của mình ngắn gọn. Trong trường hợp đó, bạn có thể sử dụng câu lệnh if nội tuyến này

const name = 'Julien'

// JavaScript if else shorthand:
const color = name === 'Julien' ? 'blue' : 'green'
// if the variable `name` is equals to "Julien" the colour is "blue" otherwise it's "green"

console.log(color)
// Output: "blue"

Toán tử bậc ba với nhiều điều kiện

Toán tử điều kiện trong JavaScript cũng cho phép bạn tạo nhiều điều kiện

Dưới đây, bạn sẽ tìm thấy một ví dụ sử dụng toán tử bậc ba

const age = 20

// This multiple conditions with the ternary operator:
age <= 25
  ? age <= 10
    ? console.log('less or equal to 10')
    : console.log('less or equal to 25 but more than 10')
  : console.log('too old')
// Output: "less or equal to 25 but more than 10"

// Is the same than this `if` `else` multiple conditions:
if (age < 25) {
  if (age < 10) console.log('less or equal to 10')
  else console.log('less or equal to 25 but more than 10')
} else {
  console.log('too old')
}
// Output: "less or equal to 25 but more than 10"

Như bạn có thể nhận thấy, thật khó để đọc. Giả sử điều kiện của bạn có nhiều hơn một điều kiện thì bạn nên tránh sử dụng toán tử bậc ba. Nếu không, mã của bạn có thể trở nên không đọc được và khó bảo trì

Toán tử bậc ba với nhiều phép toán

Toán tử bậc ba trong JavaScript cũng hoạt động để thực hiện nhiều thao tác trong một câu lệnh

Nó giống như việc viết nhiều phép toán trong một câu lệnh if else

let letter = 'a'

// This ternary operator with multiple operations:
letter === 'a'
  ? (console.log('letter is a'), console.log('this is cool'))
  : console.log('letter is not a')
// Output:
// "letter is a"
// "this is cool"

// Is the same than this `if` `else` multiple operation conditions:
if (letter === 'a') {
  console.log('letter is a')
  console.log('this is cool')
} else {
  console.log('letter is not a')
}
// Output:
// "letter is a"
// "this is cool"

Giống như toán tử bậc ba với nhiều điều kiện, tôi không khuyên bạn nên sử dụng cách này

Tóm tắt toán tử có điều kiện (bộ ba)

Tóm lại, toán tử điều kiện trong JavaScript rất mạnh, nhưng bạn nên thận trọng khi sử dụng nó

Một trong những lợi thế chính của việc sử dụng nó là viết các câu lệnh tốc ký if else. Nếu bạn có một điều kiện ngắn và muốn thực hiện nó trong một dòng, thì toán tử bậc ba sẽ hoàn hảo

Cảm ơn vì đã đọc. Kết nối nào

➡️ Tôi giúp bạn phát triển thành Phát triển web và tôi chia sẻ hành trình của mình với tư cách là Kỹ sư phần mềm du mục. Tham gia cùng tôi trên Twitter để biết thêm. 🚀🎒

Toán tử bậc ba có thể có nhiều hơn một điều kiện với việc lồng nó. Hãy xem ví dụ cho điều đó trong hướng dẫn này

Ví dụ về toán tử bậc ba nhiều điều kiện JavaScript

Mã ví dụ HTML cho

Nếu đánh dấu -> 1 thì kết quả = A

Nếu đánh dấu -> 2 thì kết quả = B

kết quả khác = C

đầu ra

Hàm JS Ternary với nhiều điều kiện

Cùng mã với chức năng để dễ sử dụng. Phiên bản này khá dễ đọc

đầu ra. 1

Một ví dụ khác để hiểu rõ hơn

Hàm JavaScript toán tử bậc ba nhiều điều kiện

đầu ra

Hãy bình luận nếu bạn có bất kỳ nghi ngờ và gợi ý nào về chủ đề dựa trên câu hỏi này

Ghi chú. Tất cả mã Ví dụ về JS đều được thử nghiệm trên trình duyệt Firefox và trình duyệt Chrome

hệ điều hành. cửa sổ 10

Mã số. Phiên bản HTML5

Rohit

Bằng cấp về Khoa học Máy tính và Kỹ sư. Nhà phát triển ứng dụng và có kinh nghiệm về nhiều ngôn ngữ lập trình. Đam mê công nghệ & thích học hỏi kỹ thuật

Chúng ta có thể sử dụng nhiều điều kiện trong JS toán tử bậc ba không?

Làm cách nào để viết nhiều dòng trong JavaScript toán tử bậc ba?

Bạn có thể có nhiều toán tử bậc ba không?

Có bao nhiêu đối số mà một toán tử ternary mất?