Hướng dẫn ternary operator in javascript - toán tử bậc ba trong javascript

Thử nó

Cú pháp

condition ? exprIfTrue : exprIfFalse

Thông số

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

Một biểu thức có giá trị được sử dụng làm điều kiện.

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

Một biểu thức được thực thi nếu

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

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

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

Một biểu thức được thực thi nếu

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

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"

Sự mô tả

Bên cạnh

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"

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"

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"

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"

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"

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"

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

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

Ví dụ

Một ví dụ đơn giản

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

Xử lý các giá trị null

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

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"

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 có điều kiện

Toán tử ternary là liên kết đúng, có nghĩa là nó có thể được "xích" theo cách sau, tương tự như chuỗi

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

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

Điều này tương đương với chuỗi

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

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

Xem thêm