Xâu chuỗi toán tử ternary javascript

Toán tử bậc ba là một toán tử điều kiện cực kỳ hữu ích được hỗ trợ bởi JavaScript. Sử dụng toán tử này, bạn có thể trả về một giá trị tùy thuộc vào điều kiện là

condition ? true expression : false expression;

0 hay

if (condition) {
    true;
} else {
    false;
}

0

Trong số tất cả các toán tử được JavaScript hỗ trợ, toán tử bậc ba là toán tử duy nhất có ba tham số

Một trong những cách sử dụng tốt nhất của toán tử bậc ba là đơn giản hóa mã của bạn. Ví dụ: bạn có thể sử dụng toán tử bậc ba để đặt giá trị của một biến tùy thuộc vào điều kiện. Điều này giúp bạn không phải sử dụng câu lệnh if…else lộn xộn hơn một chút

Trong một số phần sau, chúng tôi sẽ chỉ cho bạn cách sử dụng toán tử bậc ba trong JavaScript

Cú pháp của Toán tử ternary của JavaScript

Như đã đề cập trước đó, toán tử bậc ba hơi khác ở chỗ nó xử lý ba toán hạng. Các toán hạng này là điều kiện, biểu thức “

condition ? true expression : false expression;

0”, sau đó là biểu thức “

if (condition) {
    true;
} else {
    false;
}

0”

Khi viết toán tử này, bạn bắt đầu bằng cách xác định câu điều kiện, theo sau là dấu chấm hỏi (

if (condition) {
    true;
} else {
    false;
}

3)

Sau đó, bạn chỉ định một biểu thức sẽ được thực hiện nếu điều kiện là

condition ? true expression : false expression;

0, theo sau là dấu hai chấm (

if (condition) {
    true;
} else {
    false;
}

5)

Cuối cùng, toán tử bậc ba được kết thúc bằng một biểu thức sẽ được thực thi nếu điều kiện của bạn là

if (condition) {
    true;
} else {
    false;
}

0

condition ? true expression : false expression;

Nếu bạn sao chép hành vi của toán tử bậc ba bằng câu lệnh “

if (condition) {
    true;
} else {
    false;
}

7”, mã của bạn sẽ giống như những gì chúng tôi đã chỉ ra bên dưới

Bạn có thể thấy rằng toán tử này cắt mã của bạn từ bốn xuống còn một dòng mã

if (condition) {
    true;
} else {
    false;
}

Sử dụng Toán tử bậc ba trong JavaScript

Bây giờ chúng ta đã biết cách viết toán tử bậc ba trong JavaScript, hãy để chúng tôi chỉ cho bạn cách sử dụng toán tử này

Chúng ta sẽ khám phá cách sử dụng cơ bản của toán tử này và cách bạn có thể xâu chuỗi nhiều toán tử bậc ba lại với nhau

Cách sử dụng cơ bản của toán tử ternary

Đối với ví dụ này, chúng tôi bắt đầu bằng cách khai báo một biến có tên là “

if (condition) {
    true;
} else {
    false;
}

8” và gán cho nó giá trị là

if (condition) {
    true;
} else {
    false;
}

9

Sau đó chúng ta khai báo một biến có tên là “

if (condition) {
    true;
} else {
    false;
}

00“. Chúng ta sẽ sử dụng toán tử bậc ba để xác định giá trị của biến này bằng một điều kiện đơn giản

Đối với điều kiện của toán tử bậc ba JavaScript, chúng tôi sử dụng toán tử nhỏ hơn (

if (condition) {
    true;
} else {
    false;
}

01) để xem liệu “

if (condition) {
    true;
} else {
    false;
}

8” có nhỏ hơn

if (condition) {
    true;
} else {
    false;
}

03 không

• Nếu “

  if (condition) {
      true;
  } else {
      false;
  }

  8” nhỏ hơn

  if (condition) {
      true;
  } else {
      false;
  }

  03, biến “

  if (condition) {
      true;
  } else {
      false;
  }

  00” sẽ được gán văn bản “

  if (condition) {
      true;
  } else {
      false;
  }

  07“
• Nếu “

  if (condition) {
      true;
  } else {
      false;
  }

  00” lớn hơn hoặc bằng

  if (condition) {
      true;
  } else {
      false;
  }

  03, biến “

  if (condition) {
      true;
  } else {
      false;
  }

  00” sẽ được gán văn bản “

  if (condition) {
      true;
  } else {
      false;
  }

  11“

Tập lệnh kết thúc bằng việc chúng tôi ghi lại giá trị được lưu trữ trong biến “

if (condition) {
    true;
} else {
    false;
}

00” của chúng tôi vào bảng điều khiển bằng cách sử dụng chức năng “

if (condition) {
    true;
} else {
    false;
}

13”

if (condition) {
    true;
} else {
    false;
}

0

Sau khi chạy đoạn mã trên, bạn sẽ nhận được kết quả sau được ghi vào bảng điều khiển của mình

if (condition) {
    true;
} else {
    false;
}

1

Ví dụ Viết dưới dạng Câu lệnh if

Bây giờ, nếu bạn viết ví dụ tương tự này bằng JavaScript bằng cách sử dụng câu lệnh if có điều kiện thay vì toán tử bậc ba, thì nó sẽ giống như những gì chúng tôi đã chỉ ra bên dưới

Mặc dù cả hai đoạn mã đều tạo ra cùng một kết quả, nhưng bạn có thể thấy toán tử bậc ba cho phép bạn viết mã rõ ràng và ngắn gọn hơn như thế nào

if (condition) {
    true;
} else {
    false;
}

6

Xâu chuỗi toán tử ternary

Trong JavaScript, toán tử bậc ba cũng cho phép các chuỗi điều kiện trong đó chuỗi điều kiện bên phải thành một toán tử bậc ba khác

Bằng cách xâu chuỗi các toán tử bậc ba, bạn viết một cách hiệu quả chuỗi điều kiện “

if (condition) {
    true;
} else {
    false;
}

14”. Nhưng, tất nhiên, bạn phải cẩn thận rằng việc xâu chuỗi các toán tử bậc ba không làm cho mã của bạn khó đọc hơn

Một ví dụ về cách bạn có thể viết điều này được hiển thị dưới đây. Chúng tôi đã chia nhỏ từng phần mới của chuỗi điều kiện thành một dòng mới để dễ đọc hơn. Bạn có thể xâu chuỗi bao nhiêu toán tử bậc ba lại với nhau nếu muốn

if (condition) {
    true;
} else {
    false;
}

8

Bây giờ bạn đã biết rằng bạn có thể xâu chuỗi các toán tử bậc ba trong JavaScript, hãy để chúng tôi chỉ cho bạn một ví dụ nhanh

Với ví dụ này, chúng ta tạo một biến tên là “

if (condition) {
    true;
} else {
    false;
}

8” và gán giá trị cho nó là

if (condition) {
    true;
} else {
    false;
}

16. Chúng tôi sẽ sử dụng biến này trong cả hai điều kiện của chúng tôi

• Sau đó, chúng tôi tạo một biến có tên là “

  if (condition) {
      true;
  } else {
      false;
  }

  00“, nhưng JavaScript sẽ gán giá trị của nó thông qua các toán tử bậc ba được xâu chuỗi của chúng tôi
• Toán tử bậc ba đầu tiên sẽ kiểm tra xem “_______08” có nhỏ hơn (

  if (condition) {
      true;
  } else {
      false;
  }

  01)

  if (condition) {
      true;
  } else {
      false;
  }

  03 không. Nếu giá trị nhỏ hơn

  if (condition) {
      true;
  } else {
      false;
  }

  03, thì văn bản “

  if (condition) {
      true;
  } else {
      false;
  }

  62” sẽ được gán
• Nếu giá trị bằng hoặc vượt quá

  if (condition) {
      true;
  } else {
      false;
  }

  03, nó sẽ chuyển sang toán tử bậc ba thứ hai
• Với toán tử bậc ba thứ hai, chúng ta kiểm tra xem “

  if (condition) {
      true;
  } else {
      false;
  }

  8” có nhỏ hơn

  if (condition) {
      true;
  } else {
      false;
  }

  65 hay không. Nếu giá trị nhỏ hơn, văn bản “

  if (condition) {
      true;
  } else {
      false;
  }

  66” sẽ được gán
• Nếu giá trị lớn hơn

  if (condition) {
      true;
  } else {
      false;
  }

  65 thì sẽ gán dòng chữ “

  if (condition) {
      true;
  } else {
      false;
  }

  68”

JavaScript sẽ gán kết quả của toán tử bậc ba được xâu chuỗi cho biến “

if (condition) {
    true;
} else {
    false;
}

00” của chúng ta. Sau đó, chúng tôi ghi biến “

if (condition) {
    true;
} else {
    false;
}

00” vào bảng điều khiển nhờ sử dụng chức năng “

if (condition) {
    true;
} else {
    false;
}

13”

if (condition) {
    true;
} else {
    false;
}

6

Nếu bạn chạy ví dụ trên, bạn sẽ nhận được văn bản bên dưới trong bảng điều khiển của mình

if (condition) {
    true;
} else {
    false;
}

7

Ví dụ Viết dưới dạng Câu lệnh if

Dưới đây, bạn có thể thấy cách viết một toán tử bậc ba nối tiếp nhau nếu bạn sử dụng câu lệnh điều kiện “

if (condition) {
    true;
} else {
    false;
}

82” để thay thế

Khi xâu chuỗi các toán tử bậc ba lại với nhau, bạn cần cẩn thận hơn về cách viết chúng để tránh làm hỏng khả năng đọc mã của bạn

if (condition) {
    true;
} else {
    false;
}

9

Phần kết luận

Xuyên suốt hướng dẫn này, chúng tôi đã chỉ cho bạn cách sử dụng toán tử bậc ba trong JavaScript

Đây là toán tử điều kiện duy nhất được JavaScript hỗ trợ và rất hữu ích để đặt giá trị dựa trên việc điều kiện là đúng hay sai

Vui lòng bình luận bên dưới nếu bạn có bất kỳ câu hỏi nào về việc sử dụng toán tử này

Chúng tôi cũng có nhiều bài hướng dẫn JavaScript khác nếu bạn muốn tìm hiểu thêm về ngôn ngữ này. Chúng tôi cũng có nhiều hướng dẫn mã hóa khác nếu bạn muốn bắt đầu học một ngôn ngữ mới