Hãy nói về dấu chấm phẩy trong JavaScript

Để sử dụng chúng, hoặc không sử dụng chúng…

Dấu chấm phẩy trong JavaScript chia rẽ cộng đồng. Một số thích sử dụng chúng luôn luôn, không có vấn đề gì. Những người khác thích tránh chúng.

Tôi đã đưa ra một cuộc thăm dò trên Twitter để kiểm tra vùng nước và tôi đã tìm thấy rất nhiều dấu chấm phẩy ủng hộ:

Sau khi sử dụng dấu chấm phẩy trong nhiều năm, vào mùa thu năm 2017, tôi quyết định thử tránh chúng khi có thể. Tôi đã thiết lập Prettier để tự động xóa dấu chấm phẩy khỏi mã của mình, trừ khi có một cấu trúc mã cụ thể yêu cầu chúng.

Bây giờ tôi thấy việc tránh dấu chấm phẩy là điều tự nhiên và tôi nghĩ mã trông đẹp hơn và dễ đọc hơn.

Điều này hoàn toàn có thể vì JavaScript không yêu cầu nghiêm ngặt các dấu chấm phẩy. Khi có chỗ nào cần dấu chấm phẩy, nó sẽ thêm nó vào sau hậu trường.

cái này gọi là Chèn dấu chấm phẩy tự động.

Điều quan trọng là phải biết các quy tắc cung cấp năng lượng cho dấu chấm phẩy. Điều này sẽ cho phép bạn tránh viết mã sẽ tạo ra lỗi trước khi nó không hoạt động như bạn mong đợi.

Các quy tắc chèn dấu chấm phẩy tự động của JavaScript

Trình phân tích cú pháp JavaScript sẽ tự động thêm dấu chấm phẩy khi, trong quá trình phân tích cú pháp mã nguồn, nó tìm thấy các tình huống cụ thể sau:

1. khi dòng tiếp theo bắt đầu bằng mã phá mã hiện tại (mã có thể xuất hiện trên nhiều dòng)
2. khi dòng tiếp theo bắt đầu bằng một }đóng khối hiện tại
3. khi đến cuối tệp mã nguồn
4. khi có một return tuyên bố trên dòng riêng của mình
5. khi có một break tuyên bố trên dòng riêng của mình
6. khi có một throw tuyên bố trên dòng riêng của mình
7. khi có một continue tuyên bố trên dòng riêng của mình

Ví dụ về mã không làm những gì bạn nghĩ

Dựa trên những quy tắc đó, đây là một số ví dụ.

Thực hiện việc này:

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you

['h', 'e', 'y'].forEach((letter) => console.log(letter))

Bạn sẽ nhận được lỗi Uncaught TypeError: Cannot read property 'forEach' of undefined vì dựa trên quy tắc 1JavaScript cố gắng diễn giải mã dưới dạng

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Đoạn mã này:

(1 + 2).toString()

bản in "3".

const a = 1
const b = 2
const c = a + b
(a + b).toString()

Thay vào đó, nó nâng cao một TypeError: b is not a function ngoại lệ, bởi vì JavaScript cố gắng giải thích nó là

const a = 1
const b = 2
const c = a + b(a + b).toString()

Một ví dụ khác dựa trên quy tắc 4:

(() => {
  return
  {
    color: 'white'
  }
})()

Bạn muốn giá trị trả về của hàm được gọi ngay lập tức này là một đối tượng chứa color tài sản, nhưng không phải vậy. Thay vào đó, nó là undefinedvì JavaScript chèn dấu chấm phẩy sau return.

Thay vào đó, bạn nên đặt dấu ngoặc mở ngay sau return:

(() => {
  return {
    color: 'white'
  }
})()

Bạn sẽ nghĩ rằng mã này hiển thị ‘0’ trong một cảnh báo:

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

nhưng thay vào đó, nó hiển thị 2, vì JavaScript (theo quy tắc 1) diễn giải nó là:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

Phần kết luận

Hãy cẩn thận – một số người rất cố chấp về dấu chấm phẩy. Tôi không quan tâm, thành thật mà nói. Công cụ này cung cấp cho chúng tôi tùy chọn không sử dụng nó, vì vậy chúng tôi có thể tránh dấu chấm phẩy nếu muốn.

Tôi không đề xuất bất cứ điều gì ở bên này hay bên kia. Chỉ cần đưa ra quyết định của riêng bạn dựa trên những gì phù hợp với bạn.

Bất chấp điều đó, chúng ta chỉ cần chú ý một chút, ngay cả khi hầu hết thời gian những tình huống cơ bản đó không bao giờ xuất hiện trong mã của bạn.

Chọn một số quy tắc:

• Cẩn thận với return các câu lệnh. Nếu bạn trả lại thứ gì đó, hãy thêm nó vào cùng dòng với hàng trả lại (tương tự cho break, throw, continue)
• Không bao giờ bắt đầu một dòng với dấu ngoặc đơn, vì chúng có thể được nối với dòng trước đó để tạo thành lệnh gọi hàm hoặc tham chiếu phần tử mảng

Và cuối cùng, hãy luôn kiểm tra mã của bạn để đảm bảo mã đó hoạt động như bạn muốn.

Tôi xuất bản 1 hướng dẫn lập trình miễn phí mỗi ngày trên flaviocopes.com, hãy xem thử!

Được xuất bản lần đầu tại flaviocopes.com.