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

Ngoài ra còn có một bàn tay ngắn nếu khác, được gọi là toán tử bậc ba vì nó bao gồm ba toán hạng. Nó có thể được sử dụng để thay thế nhiều dòng mã bằng một dòng duy nhất. Nó thường được sử dụng để thay thế các câu lệnh if other đơn giản

cú pháp

biến = (điều kiện) ? . biểu thứcSai;

thay vì viết

Thí dụ

thời gian int = 20;
nếu (thời gian <18) {
cout << "Chúc một ngày tốt lành. “;
} khác {
cout << "Chào buổi tối. “;
}

Bạn chỉ có thể viết

Thí dụ

thời gian int = 20;
kết quả chuỗi = (thời gian <18)? . ". "Chào buổi tối. “;
cout<Tự mình thử »

Ngoài ra còn có một bàn tay ngắn nếu khác, được gọi là toán tử bậc ba vì nó bao gồm ba toán hạng. Nó có thể được sử dụng để thay thế nhiều dòng mã bằng một dòng duy nhất. Nó thường được sử dụng để thay thế các câu lệnh if other đơn giản

cú pháp

biến = (điều kiện) ? . biểu thứcSai;

thay vì viết

Thí dụ

thời gian int = 20;
nếu (thời gian <18) {
printf("Chúc một ngày tốt lành. ");
} khác {
printf("Chào buổi tối. ");
}

Bạn chỉ có thể viết

Thí dụ

thời gian int = 20;
(thời gian <18) ? . "). printf("Chào buổi tối. ");

Hoàn toàn tùy thuộc vào bạn nếu bạn muốn sử dụng if truyền thống. câu lệnh khác hoặc toán tử ternary

Có nhiều toán tử trong JavaScript, một trong số đó là toán tử bậc ba. Trong bài viết này, tôi sẽ giải thích toán tử này là gì và nó có thể hữu ích như thế nào khi xây dựng ứng dụng

Tôi có một phiên bản video của chủ đề này, bạn cũng có thể xem để bổ sung cho việc học của mình

Toán tử ternary là gì?

Toán tử bậc ba là toán tử có điều kiện để đánh giá một trong hai biểu thức – biểu thức đúng và biểu thức sai – dựa trên biểu thức điều kiện mà bạn cung cấp

Đây là cú pháp

condition ? trueExpression : falseExpression

Bạn có điều kiện trả về giá trị trung thực hoặc sai. Giá trị trung thực ở đây bao gồm true và giá trị không giả. Các giá trị sai ở đây bao gồm false,

const result = condition
  ? trueExpression
  : falseExpression

const result = condition
  ? trueExpression
  : falseExpression

Sau điều kiện, bạn có dấu chấm hỏi (có thể coi là "đặt câu hỏi về điều kiện"), theo sau là biểu thức trueExpression. Biểu thức này được thực thi nếu biểu thức điều kiện có giá trị là true

Sau biểu thức đúng, bạn có dấu hai chấm, theo sau là biểu thức sai. Biểu thức này được thực thi nếu biểu thức điều kiện có giá trị là false

Toán tử bậc ba trả về một giá trị mà bạn có thể gán cho một biến. Bạn không thể sử dụng toán tử mà không gán giá trị trả về cho một biến

const result = condition
  ? trueExpression
  : falseExpression

Giá trị trả về phụ thuộc vào việc đánh giá biểu thức điều kiện. Nếu điều kiện là true, thì giá trị trả về từ trueExpression được gán cho biến. Mặt khác, giá trị trả về từ falseExpression sẽ được gán cho biến

Cách sử dụng toán tử bậc ba thay cho câu lệnh const result = condition ? trueExpression : falseExpression 5

Toán tử bậc ba có thể là sự thay thế tốt cho câu lệnh

const result = condition
  ? trueExpression
  : falseExpression

Hãy xem một ví dụ

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

Trong ví dụ này, chúng ta có biến

const result = condition
  ? trueExpression
  : falseExpression

const result = condition
  ? trueExpression
  : falseExpression

const result = condition
  ? trueExpression
  : falseExpression

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

const result = condition
  ? trueExpression
  : falseExpression

Chúng tôi có thể cải thiện mã này với toán tử ternary. Đây là cách

Ghi nhớ cú pháp. bạn có điều kiện, dấu chấm hỏi, biểu thức đúng, dấu hai chấm và cuối cùng là biểu thức sai. Hãy nhìn vào điều này trong mã

const score = 80

const scoreRating =
  score > 70 ? "Excellent" : "Do better"

console.log(scoreRating)
// Excellent

Đây là cách chúng tôi sử dụng toán tử bậc ba. Các biểu thức true và false ở đây là các chuỗi sẽ được trả về biến

const result = condition
  ? trueExpression
  : falseExpression

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

Các biểu thức đúng và sai có thể là bất kỳ loại biểu thức nào từ thực thi hàm đến các phép tính số học, v.v. Đây là một ví dụ với việc thực thi chức năng

function printPoor() {
  console.log("Poor result")
  return "poor"
}

function printSuccess() {
  console.log("Nice result")
  return "success"
}


const pass = false;

const result = pass ? printSuccess() : printPoor()
// Poor result (console.log executed)

console.log(result)
// poor

Ở đây, bạn thấy rằng khi điều kiện trả về false, biểu thức sai,

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

Đối với phần còn lại của bài viết này, tôi sẽ sử dụng các biểu thức chuỗi đúng và sai để đơn giản hóa

Cách sử dụng toán tử ternary lồng nhau

Điều gì sẽ xảy ra nếu bạn muốn đạt được câu lệnh

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

Hãy xem một ví dụ

const score = 60
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else if (score > 50) {
  scoreRating = "Average"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Average"

Chúng tôi có một tuyên bố

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

const result = condition
  ? trueExpression
  : falseExpression

const score = 80

const scoreRating =
  score > 70 ? "Excellent" : "Do better"

console.log(scoreRating)
// Excellent

const score = 80

const scoreRating =
  score > 70 ? "Excellent" : "Do better"

console.log(scoreRating)
// Excellent

Hãy xem cách thực hiện điều này với toán tử bậc ba

const score = 60

const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : "Do better"

console.log(scoreRating)
// "Average"

Ở đây, bạn thấy chúng tôi có hai dấu chấm hỏi và hai dấu hai chấm. Trong toán tử bậc ba đầu tiên, chúng ta có biểu thức điều kiện

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

Điều kiện thứ hai ở đây là

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

Với điều này, nếu điều kiện đầu tiên là đúng, "Xuất sắc" được trả về

const result = condition
  ? trueExpression
  : falseExpression

Nhiều toán tử ternary có thể làm cho mã của bạn không thể đọc được

Trong các ví dụ trước, chúng ta đã thấy cách chúng ta có thể cải thiện mã của mình trong khi vẫn duy trì khả năng đọc. Nhưng bạn phải cẩn thận khi sử dụng nhiều toán tử bậc ba

Hãy tưởng tượng chúng ta có thêm một toán tử bậc ba trong ví dụ trước

const score = 45

const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : score > 40
    ? "Fair"
    : "Do better"

console.log(scoreRating)
// "Fair"

Ở đây chúng tôi có ba toán tử bậc ba và bạn có thể thấy rằng mọi thứ đang trở nên khó đọc hơn

Trong những trường hợp như thế này khi bạn cần nhiều điều kiện, sử dụng câu lệnh

const result = condition
  ? trueExpression
  : falseExpression

function printPoor() {
  console.log("Poor result")
  return "poor"
}

function printSuccess() {
  console.log("Nice result")
  return "success"
}


const pass = false;

const result = pass ? printSuccess() : printPoor()
// Poor result (console.log executed)

console.log(result)
// poor

kết thúc

Toán tử bậc ba cho phép bạn đánh giá các biểu thức điều kiện và có thể thay thế cho các câu lệnh

const result = condition
  ? trueExpression
  : falseExpression

Trong bài viết này, tôi đã chỉ cho bạn cách thức hoạt động của nó, sử dụng một số ví dụ về

const result = condition
  ? trueExpression
  : falseExpression

Nếu bạn thích tác phẩm này, xin vui lòng chia sẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Dillion Megida

Người ủng hộ nhà phát triển và Người sáng tạo nội dung đam mê chia sẻ kiến ​​thức của tôi về Công nghệ. Tôi đơn giản hóa JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / v.v. Kênh YT của tôi. youtube. com/c/deeecode

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

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

Chúng ta có thể thực thi nhiều câu lệnh trong toán tử bậc ba không?

Làm cách nào để viết toán tử bậc ba lồng nhau trong JavaScript?

Làm cách nào để viết nhiều câu lệnh trong toán tử bậc ba PHP?