Nội tuyến nếu điều kiện trong html

Trong hướng dẫn này, chúng ta sẽ xem xét cách chúng ta có thể tạo kiểm tra if tối thiểu trong JavaScript bằng các kỹ thuật khác nhau

JavaScript Inline nếu sử dụng Toán tử bậc ba

Phương pháp phổ biến nhất và tốt nhất để giới thiệu câu lệnh if nội tuyến trong JavaScript là sử dụng toán tử bậc ba

Toán tử bậc ba sử dụng dấu hai chấm và dấu chấm hỏi để giới thiệu logic và hành động

Hãy để chúng tôi minh họa cách chúng ta có thể sử dụng toán tử bậc ba để tạo câu lệnh if nội tuyến

Giả sử chúng ta có hai số và chúng ta muốn lấy giá trị lớn nhất. Nếu không có toán tử ternary, chúng tôi sẽ viết mã như được hiển thị

let a = 10
let b = 2
if (a > b) {
    console.log( a )
 < . }
 else {
    console.log( b )
 < }

Tuy nhiên, sử dụng câu lệnh if nội tuyến, chúng ta có thể thu nhỏ đoạn mã trên thành một dòng như trong đoạn mã bên dưới

let a = 10
let b = 2
console.log( a > b . ? a : b );

Trong trường hợp này, chúng tôi sử dụng toán tử bậc ba để so sánh điều kiện mà chúng tôi muốn kiểm tra. Nếu a lớn hơn b, chúng ta an ủi. log(a) nếu không thì bảng điều khiển. nhật ký (b)

Chạy đoạn mã trên sẽ trả về kết quả như hình

$ nút nội tuyến. js
10

Như bạn có thể thấy, bằng cách sử dụng toán tử bậc ba, chúng ta có thể thu nhỏ câu lệnh if other thành một câu lệnh duy nhất

JavaScript nội tuyến nếu sử dụng toán tử logic

Phương pháp thứ hai bạn có thể sử dụng là toán tử logic và. Nó cho phép chúng tôi kết hợp điều kiện mà chúng tôi muốn kiểm tra và khối thực thi trong một dòng như được hiển thị

let a = 10
let b = 2
console.log( a > b . && a || b )

Ở đây, chúng ta có thể thấy logic và trong thực tế. Chúng tôi bắt đầu bằng cách chỉ định điều kiện mà chúng tôi muốn kiểm tra ở phía bên trái của toán tử. Nếu đúng, khối thực thi được chạy. Nếu không, hãy chạy thao tác bên phải

JavaScript Inline if (Nhiều điều kiện) Sử dụng Toán tử bậc ba

Bạn có thể hỏi, điều gì sẽ xảy ra nếu tôi có một điều kiện lồng nhau chẳng hạn như nhiều if. các khối khác?

let a = 10
let b = 2
console.log( a > b . ? a : a < b ? b . : "NaN");

Trong ví dụ trên, chúng ta có nhiều điều kiện. Nếu a lớn hơn b, in a, nếu a nhỏ hơn b, in b, ngược lại NaN

Đóng cửa

Trong bài viết này, chúng ta đã thảo luận cách triển khai các câu lệnh if nội tuyến bằng cách sử dụng toán tử bậc ba và logic và

Để làm điều đó, chúng ta có thể sử dụng câu lệnh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6 và toán tử điều kiện

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

7, còn được gọi là toán tử “dấu chấm hỏi”

Câu lệnh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

8 đánh giá một điều kiện trong ngoặc đơn và, nếu kết quả là

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

9, thì thực thi một khối mã

Ví dụ

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) alert( 'You are right!' );

Trong ví dụ trên, điều kiện là một phép kiểm tra đẳng thức đơn giản (

if (0) { // 0 is falsy
  ...
}

0), nhưng nó có thể phức tạp hơn nhiều

Nếu chúng ta muốn thực thi nhiều hơn một câu lệnh, chúng ta phải bọc khối mã của mình bên trong dấu ngoặc nhọn

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

Chúng tôi khuyên bạn nên bọc khối mã của mình bằng dấu ngoặc nhọn

if (0) { // 0 is falsy
  ...
}

1 mỗi khi bạn sử dụng câu lệnh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6, ngay cả khi chỉ có một câu lệnh để thực thi. Làm như vậy sẽ cải thiện khả năng đọc

Câu lệnh

if (0) { // 0 is falsy
  ...
}

3 đánh giá biểu thức trong ngoặc đơn của nó và chuyển đổi kết quả thành giá trị boolean

Hãy nhớ lại các quy tắc chuyển đổi từ chương Chuyển đổi loại

• Một số

  if (0) { // 0 is falsy
    ...
  }

  4, một chuỗi rỗng

  if (0) { // 0 is falsy
    ...
  }

  5,

  if (0) { // 0 is falsy
    ...
  }

  6,

  if (0) { // 0 is falsy
    ...
  }

  7 và

  if (0) { // 0 is falsy
    ...
  }

  8 đều trở thành

  if (0) { // 0 is falsy
    ...
  }

  9. Do đó chúng được gọi là các giá trị “falsy”
• Các giá trị khác trở thành

  if (year == 2015) {
    alert( "That's correct!" );
    alert( "You're so smart!" );
  }

  9, vì vậy chúng được gọi là “trung thực”

Vì vậy, mã trong điều kiện này sẽ không bao giờ thực thi

if (0) { // 0 is falsy
  ...
}

…và bên trong điều kiện này – nó sẽ luôn luôn

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

8

Chúng tôi cũng có thể chuyển một giá trị boolean được đánh giá trước cho

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6, như thế này

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

0

Câu lệnh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6 có thể chứa khối tùy chọn

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

83. Nó thực thi khi điều kiện sai

Ví dụ

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

3

Đôi khi, chúng tôi muốn thử nghiệm một số biến thể của một điều kiện. Mệnh đề

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

84 cho phép chúng ta làm điều đó

Ví dụ

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

5

Trong đoạn mã trên, trước tiên JavaScript kiểm tra

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

85. Nếu điều đó là sai, nó sẽ chuyển sang điều kiện tiếp theo

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

86. Nếu đó cũng là giả, nó hiển thị

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

87 cuối cùng

Có thể có thêm

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

84 khối.

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

83 cuối cùng là tùy chọn

Đôi khi, chúng ta cần gán một biến tùy thuộc vào một điều kiện

Ví dụ

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

1

Cái gọi là toán tử “có điều kiện” hoặc “dấu chấm hỏi” cho phép chúng ta làm điều đó một cách ngắn gọn và đơn giản hơn

Toán tử được biểu thị bằng dấu chấm hỏi

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

7. Đôi khi nó được gọi là "bộ ba", bởi vì toán tử có ba toán hạng. Nó thực sự là toán tử duy nhất trong JavaScript có nhiều

Cú pháp là

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

3

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

01 được đánh giá. nếu đó là sự thật thì

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

02 được trả lại, nếu không thì –

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

03

Ví dụ

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

7

Về mặt kỹ thuật, chúng ta có thể bỏ qua dấu ngoặc đơn xung quanh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

04. Toán tử dấu chấm hỏi có độ ưu tiên thấp, vì vậy nó thực thi sau khi so sánh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

05

Ví dụ này sẽ làm điều tương tự như ví dụ trước

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

0

Nhưng dấu ngoặc đơn làm cho mã dễ đọc hơn, vì vậy chúng tôi khuyên bạn nên sử dụng chúng

Xin lưu ý

Trong ví dụ trên, bạn có thể tránh sử dụng toán tử dấu chấm hỏi vì phép so sánh tự trả về

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

06

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

1

Một chuỗi các toán tử dấu chấm hỏi

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

7 có thể trả về một giá trị phụ thuộc vào nhiều hơn một điều kiện

Ví dụ

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

2

Lúc đầu có thể khó nắm bắt những gì đang xảy ra. Nhưng sau khi xem xét kỹ hơn, chúng ta có thể thấy rằng đó chỉ là một chuỗi thử nghiệm bình thường.

1. Dấu chấm hỏi đầu tiên kiểm tra xem

   if (year == 2015) {
     alert( "That's correct!" );
     alert( "You're so smart!" );
   }

   08
2. Nếu đúng – nó trả về

   if (year == 2015) {
     alert( "That's correct!" );
     alert( "You're so smart!" );
   }

   09. Ngược lại, nó tiếp tục đến biểu thức sau dấu hai chấm “. ”, kiểm tra

   if (year == 2015) {
     alert( "That's correct!" );
     alert( "You're so smart!" );
   }

   30
3. Nếu điều đó đúng – nó trả về

   if (year == 2015) {
     alert( "That's correct!" );
     alert( "You're so smart!" );
   }

   31. Nếu không, nó tiếp tục biểu thức sau dấu hai chấm tiếp theo “. ”, kiểm tra

   if (year == 2015) {
     alert( "That's correct!" );
     alert( "You're so smart!" );
   }

   32
4. Nếu điều đó đúng – nó trả về

   if (year == 2015) {
     alert( "That's correct!" );
     alert( "You're so smart!" );
   }

   33. Mặt khác, nó tiếp tục biểu thức sau dấu hai chấm cuối cùng “. ”, trả về

   if (year == 2015) {
     alert( "That's correct!" );
     alert( "You're so smart!" );
   }

   34

Đây là giao diện của nó khi sử dụng

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

35

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

3

Đôi khi dấu chấm hỏi

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

7 được dùng để thay thế cho

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

4

Tùy thuộc vào điều kiện

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

38, biểu thức đầu tiên hoặc biểu thức thứ hai sau

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

7 được thực thi và hiển thị cảnh báo

Chúng tôi không gán kết quả cho một biến ở đây. Thay vào đó, chúng tôi thực thi các mã khác nhau tùy thuộc vào điều kiện

Không nên sử dụng toán tử dấu chấm hỏi theo cách này

Ký hiệu này ngắn hơn câu lệnh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6 tương đương, thu hút một số lập trình viên. Nhưng nó ít đọc hơn

Đây là mã tương tự sử dụng

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6 để so sánh

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

5

Mắt chúng ta quét mã theo chiều dọc. Các khối mã kéo dài nhiều dòng sẽ dễ hiểu hơn một tập lệnh dài, nằm ngang

Mục đích của toán tử dấu chấm hỏi

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

7 là trả về giá trị này hay giá trị khác tùy thuộc vào điều kiện của nó. Vui lòng sử dụng nó cho chính xác điều đó. Sử dụng

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

6 khi bạn cần thực thi các nhánh mã khác nhau

Chúng ta có thể viết nếu điều kiện trong HTML không?

Làm cách nào để viết js nội tuyến trong HTML?

Làm cách nào để viết một dòng if other trong JavaScript?

Hàm nội tuyến JavaScript là gì?