Hướng dẫn javascript const if/else - javascript const if / else

JavaScript: Biến & hằng số

JavaScript: console.log()

JavaScript: Phạm vi của biến

Các kiểu dữ liệu cơ bản trong JavaScript

JavaScript: Kiểu dữ liệu số

JavaScript: Mảng đa chiều

Kiểm soát luồng trong Javascript

JavaScript: break & continue

JavaScript: Getter & Setter

JavaScript: Tham số mặc định

JavaScript: async & await

JavaScript: Giới thiệu JavaScript ES6

JavaScript: Template Literal

JavaScript: Toán tử Spread

JavaScript: Destructuring

Kiến thức nâng cao trong JS

JavaScript: Cơ chế Hoisting

JavaScript: Cú pháp "use strict"

JavaScript: setInterval()

JavaScript: Map & WeakMap

JavaScript: Set & WeakSet

JavaScript: Ngày & thời gian

JavaScript: Iterator & Iterable

Bạn cần đăng nhập để bình luận bài viết nàyđăng nhập để bình luận bài viết này

Chưa có bình luận nào, hãy là người đầu tiên bình luận

Về chúng tôi

Giới thiệu

Góc báo chí

Tuyển dụng

Liên hệ

Hỏi đáp

Chính sách bảo mật

Điều khoản dịch vụ

Quy chế hoạt động

Học miễn phí

Lộ trình

Khóa học

Luyện tập

Đánh giá kỹ năng

Contest

Project

Tutorial

Học với Mentor

HTML CSS từ Zero đến Hero

Lập trình front end với ReactJS

Lập trình Back end với NodeJS

Liên kết

Cộng đồng

Dataset

Opensource

Từ điển thuật ngữ

Rút gọn link

Tra cứu lỗ hổng bảo mật

Cơ sở dữ liệu mã độc

Đánh giá an toàn website

Trắc nghiệm nghề

Tạo CV

Copyright ©2022 TEK4.VN

Trụ sở chính:

Văn phòng: Số 27-3RD, Sunrise D, The Manor Central Park, đường Nguyễn Xiển, phường Đại Kim, quận Hoàng Mai, TP. Hà Nội.

Liên hệ truyền thông: 0929.536.185 0929.536.185

Chịu trách nhiệm nội dung: Ông Trần Anh TúÔng Trần Anh Tú

TEK4.VN giữ bản quyền nội dung trên website này. Cấm sao chép dưới mọi hình thức nếu không có sự chấp thuận bằng văn bản.

71

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi không chắc tại sao nhưng dường như tôi không thể gọi các biến ____10 hoặc

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

1 nếu tôi khai báo chúng trong một câu lệnh

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

2.

if (withBorder) {
  const classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
  const classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}
return (
  

    {renderedResult}
  
);

Nếu tôi sử dụng mã này, nó nói rằng

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

3.

Nhưng nếu tôi thay đổi các lớp

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

1 thành

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

5 được xác định nhưng tôi nhận được một cảnh báo về

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

6and

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

7

Làm thế nào tôi có thể sửa chữa cái này?

Wasi Ahmad

33.2K31 Huy hiệu vàng109 Huy hiệu bạc155 Huy hiệu đồng31 gold badges109 silver badges155 bronze badges

Đã hỏi ngày 29 tháng 11 năm 2016 lúc 22:35Nov 29, 2016 at 22:35

Johhan Santanajohhhan SantanaJohhan Santana

2.1754 Huy hiệu vàng32 Huy hiệu bạc60 Huy hiệu Đồng4 gold badges32 silver badges60 bronze badges

5

Đây là một ví dụ điển hình về nơi một bài tập đơn giản có thể đủ:

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

Như được chỉ định trong các bình luận/câu trả lời khác

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

0 và

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

1 được khối phạm vi, vì vậy đó là lý do tại sao chúng không hoạt động trong ví dụ của bạn.

Đối với mã máy sấy, bạn chỉ có thể sử dụng ternary cho phần phụ thuộc vào nó:

 const classes = (withBorder ? `${styles.circularBorder} ` : "") +
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

Đã trả lời ngày 29 tháng 11 năm 2016 lúc 22:39Nov 29, 2016 at 22:39

1

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

0 và

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

1 là phạm vi mức độ khối có nghĩa là chúng chỉ có thể được sử dụng trong khối mà chúng đã được xác định trong IE.

 const classes = (withBorder ? `${styles.circularBorder} ` : "") +
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

2

Trong trường hợp này, tôi sẽ chỉ xác định ở trên câu lệnh if/other

let classes;

if (withBorder) {
  classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
  classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}

Đã trả lời ngày 29 tháng 11 năm 2016 lúc 22:38Nov 29, 2016 at 22:38

Finalfreqfinalfreqfinalfreq

6.6101 Huy hiệu vàng24 Huy hiệu bạc27 Huy hiệu đồng1 gold badge24 silver badges27 bronze badges

2

Thay thế (không chắc nó tốt cũng không thanh lịch):

const classes = (() => {
  if (withBorder) {
    return `${styles.circularBorder}...`;
  } else {
    return `${styles.dimensions}...`;
  }
})();

Đã trả lời ngày 2 tháng 8 năm 2018 lúc 14:11Aug 2, 2018 at 14:11

rap-2-hrap-2-hrap-2-h

27.7K33 Huy hiệu vàng160 Huy hiệu bạc249 Huy hiệu Đồng33 gold badges160 silver badges249 bronze badges

3

Không sử dụng ________ 23 -________ 24-statement mà là một biểu thức ternary:

const classes = withBorder
  ? `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
  :                          `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;

Ngoài ra, chỉ cần khai báo nó bên ngoài khối

 const classes = (withBorder ? `${styles.circularBorder} ` : "") +
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

3, cho phép bạn loại bỏ sự trùng lặp là:

let classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
if (withBorder) {
  classes += ` ${styles.circularBorder}`;
  // or if you care about the order,
  // classes = `${styles.circularBorder} ${classes}`;
}

Cũng có một cái nhìn về xây dựng các lớp lộn xộn.

Đã trả lời ngày 29 tháng 11 năm 2016 lúc 22:40Nov 29, 2016 at 22:40

BergibergiBergi

594K138 Huy hiệu vàng924 Huy hiệu bạc1311 Huy hiệu Đồng138 gold badges924 silver badges1311 bronze badges

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

0 và

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

1 là phạm vi cấp độ khối, vì vậy bạn sẽ phải xác định chúng bên ngoài khối.

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

5 hoạt động vì nó nâng ra.

Bạn có thể xác định

 const classes = (withBorder ? `${styles.circularBorder} ` : "") +
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

9 trước khối

 const classes = (withBorder ? `${styles.circularBorder} ` : "") +
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

3 như @finalfreq

hoặc

let classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;

if (withBorder) {
  classes += `${styles.circularBorder}`;
}

Đã trả lời ngày 29 tháng 11 năm 2016 lúc 23:03Nov 29, 2016 at 23:03

Tiêu chuẩn ESLINT thích các toán tử ở đầu dòng. Các điều kiện dài cũng nên được trừu tượng hóa, trừ khi trong vòng lặp thời gian máy tính.

Trong trường hợp cụ thể này, các chuỗi cũng dài, vì vậy tôi cũng sẽ trừu tượng hóa chúng. Vấn đề với cách của Bergi là hầu hết các lin sẽ làm tê liệt phong cách của anh ấy, vì lý do phù hợp.

Cách này giữ cho mọi thứ bình thường và dễ đọc, nếu bạn quen thuộc với ternaries, điều mà bạn nên có.

const styleWithBorder = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const styleWithoutBorder = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const classes = isBorderedElement ? [ styleWithBorder ] : [ styleWithoutBorder ]

Đã trả lời ngày 23 tháng 1 năm 2018 lúc 22:57Jan 23, 2018 at 22:57

Ray Fossray FossRay Foss

3.3433 huy hiệu vàng27 Huy hiệu bạc29 Huy hiệu đồng3 gold badges27 silver badges29 bronze badges

Đơn giản, chỉ cần làm điều này:, just do this:

const genericStyle = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`,

classes = withBorder ? `${styles.circularBorder} ${genericStyle}` : genericStyle;

return (
  

    {renderedResult}
  
);

Điều này cũng có một số dọn dẹp, lớp đã sử dụng hai lần và chỉ

let classes;

if (withBorder) {
  classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
  classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}

1 là sự khác biệt ...

Đã trả lời ngày 3 tháng 4 năm 2019 lúc 11:11Apr 3, 2019 at 11:11

AlirezaalirezaAlireza

96.1K26 Huy hiệu vàng265 Huy hiệu bạc167 Huy hiệu đồng26 gold badges265 silver badges167 bronze badges