Conditional (ternary) operator

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Toán tử điều kiện (ternary) là toán tử JavaScript duy nhất nhận ba toán hạng: một điều kiện theo sau là dấu chấm hỏi (?), sau đó là một biểu thức thực thi nếu điều kiện là truthy tiếp theo là dấu hai chấm (:), và cuối cùng là biểu thức thực thi nếu điều kiện là falsy. Toán tử này thường được dùng thay thế cho câu lệnh if...else.

Try it

function getFee(isMember) {
  return isMember ? "$2.00" : "$10.00";
}

console.log(getFee(true));
// Expected output: "$2.00"

console.log(getFee(false));
// Expected output: "$10.00"

console.log(getFee(null));
// Expected output: "$10.00"

Cú pháp

condition ? exprIfTrue : exprIfFalse

Tham số

condition: Một biểu thức có giá trị được dùng làm điều kiện.
exprIfTrue: Một biểu thức được thực thi nếu condition đánh giá là giá trị truthy (giá trị bằng hoặc có thể chuyển đổi thành true).
exprIfFalse: Một biểu thức được thực thi nếu condition là falsy (tức là có giá trị có thể chuyển đổi thành false).

const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"

Xử lý giá trị null

Một cách dùng phổ biến là xử lý giá trị có thể là null:

const greeting = (person) => {
  const name = person ? person.name : "stranger";
  return `Howdy, ${name}`;
};

console.log(greeting({ name: "Alice" })); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"

Chuỗi điều kiện

Toán tử ternary là kết hợp từ phải, có nghĩa là nó có thể được "nối thành chuỗi" theo cách sau, tương tự như chuỗi if … else if … else if … else:

function example() {
  return condition1 ? value1
    : condition2 ? value2
    : condition3 ? value3
    : value4;
}

Đoạn này tương đương với chuỗi if...else sau.

function example() {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}