Thực tiễn tốt nhất về trích dẫn đơn hoặc kép JavaScript

Hầu hết các nhà phát triển JavaScript [hoặc TypeScript] đều biết rằng ngôn ngữ này cho phép diễn đạt các chuỗi ký tự bằng cách sử dụng dấu ngoặc kép [“] hoặc dấu ngoặc đơn [‘]. Cho rằng cả hai cách diễn đạt chuỗi đều tương đương về mặt ngữ nghĩa, điều này dẫn đến câu hỏi đâu là cách “đúng”

Nói chung, khi nói đến phong cách viết mã, bạn nên tuân theo quy ước của ngôn ngữ cụ thể mà bạn đang xử lý [ví dụ: sử dụng phương thức camelCase trong JavaScript, nhưng PascalCase trong C#]

Thật không may, có vẻ như không có quy ước chính thức nào cho các trích dẫn chuỗi khi nói đến JavaScript. Vì vậy, điều tốt nhất tiếp theo chúng ta có thể làm để quyết định phong cách trích dẫn tốt nhất sẽ sử dụng là thử và tìm ra quy ước nào phổ biến hơn.

Nhìn vào một số dự án JavaScript phổ biến trên GitHub, tôi nhận thấy rằng tất cả các phản ứng, khoảnh khắc và diễn đạt đều sử dụng dấu nháy đơn cho chuỗi. Tuy nhiên, một dự án phổ biến khác, tslib, sử dụng dấu ngoặc kép 🙄. Vì vậy, mặc dù có vẻ như dấu nháy đơn phổ biến hơn nhưng số liệu này không hoàn toàn mang tính kết luận

Yếu tố quyết định thuyết phục cá nhân tôi áp dụng cho việc phát triển web bằng khung JavaScript sử dụng các mẫu HTML, chẳng hạn như Angular hoặc Vue. js. Đặc biệt, các khung này cho phép chúng tôi sử dụng các biểu thức JavaScript cho các giá trị thuộc tính HTML. Lấy ví dụ như sau

[Vì HTML cũng tình cờ cho phép trích dẫn kép hoặc trích dẫn đơn để phân định các giá trị thuộc tính, kiểu này đưa chúng ta trở lại cuộc tranh luận tương tự. Tuy nhiên, trong trường hợp các thuộc tính HTML, tôi sẽ luôn sử dụng dấu ngoặc kép, vì việc sử dụng dấu ngoặc đơn cho các giá trị thuộc tính là rất không phổ biến và nói thẳng ra là có vẻ sai]

Vì vậy, do chúng tôi sử dụng dấu ngoặc kép cho các thuộc tính HTML, cách duy nhất để chúng tôi sử dụng dấu ngoặc kép trong biểu thức JavaScript sẽ như vậy

mà vì lý do rõ ràng là khá nhiều ra khỏi câu hỏi. Do đó, về cơ bản, chúng tôi buộc phải sử dụng dấu nháy đơn cho bất kỳ chuỗi ký tự nào bên trong biểu thức JavaScript

Khi nói đến các quy ước viết mã, việc áp dụng một quy ước nhất quán quan trọng hơn là sử dụng quy ước “tốt nhất”. Nếu sau đó chúng ta sẽ sử dụng các trích dẫn đơn trong JavaScript trong HTML, thì chúng ta phải làm tương tự ở mọi nơi khác vì mục đích nhất quán. Vì lý do này, lựa chọn cuối cùng của cá nhân tôi đối với chữ JavaScript là sử dụng dấu nháy đơn

Công cụ kiểu mã hóa

Bây giờ, bất kể bạn quyết định sử dụng dấu ngoặc đơn hay dấu ngoặc kép trong JavaScript, vấn đề quan trọng hơn là áp dụng quy ước của bạn một cách nhất quán trong toàn bộ cơ sở mã. ESLint là một công cụ sẽ giúp ích rất nhiều trong việc thực thi một phong cách viết mã nhất quán. Bạn cung cấp cho nó một tệp cấu hình chỉ định danh sách các quy tắc mô tả các quy ước mã hóa của bạn và nó sẽ chỉ ra nơi mã của bạn không tuân theo các quy tắc đã chỉ định. Xem các liên kết sau để bắt đầu

  • Hướng dẫn Bắt đầu ESLint
  • TypeScript ESLint. công cụ để thêm hỗ trợ TypeScript vào ESLint
  • Tích hợp ESLint. tìm plugin để thêm hỗ trợ ESLint vào IDE yêu thích của bạn

Thêm quy tắc quotes: ['error', 'single'] vào của bạn. eslintrc. js để làm cho ESLint thực thi các trích dẫn đơn

Nếu bạn tình cờ có nhiều vi phạm về kiểu dáng trong mã của mình, hãy biết rằng một số vi phạm quy tắc có thể được ESLint tự động khắc phục [bao gồm cả chuỗi ký tự bằng cách sử dụng loại trích dẫn sai]. Chỉ cần chạy lệnh eslint bao gồm tùy chọn --fix, như vậy [điều chỉnh tùy chọn --ext dựa trên việc mã của bạn ở dạng JavaScript hay TypeScript]

eslint -c .eslintrc.js --fix --ext .js ./

Tôi cũng rất có thể giới thiệu Prettier để duy trì phong cách viết mã nhất quán và sửa lỗi mã nguồn hiện có

Như tôi đã đề cập, kiểu trích dẫn nào bạn quyết định sử dụng trong mã JavaScript / TypeScript của mình không quan trọng bằng việc thực sự cam kết với điều đó và áp dụng quy tắc một cách nhất quán. Không nên đánh giá thấp việc áp dụng nhất quán các quy ước viết mã vì nó có thể giảm đáng kể chi phí nhận thức khi đọc mã. Việc sử dụng các công cụ như ESLint và Prettier có thể giúp ích rất nhiều trong việc đảm bảo phong cách viết mã vẫn nhất quán ngay cả khi có nhiều nhà phát triển đóng góp vào cơ sở mã

Trong JavaScript, dấu nháy đơn [_______3] và dấu nháy kép [“”] được sử dụng để tạo chuỗi ký tự. Hầu hết các nhà phát triển sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép tùy ý họ và đôi khi họ để trình định dạng mã của mình quyết định sử dụng cái gì

Vì vậy, tôi muốn tìm ra sự khác biệt thực sự giữa 2 điều này và bài viết này sẽ thảo luận về những điểm tương đồng, khác biệt và các mẹo cần thiết mà bạn nên nhớ khi sử dụng các trích dẫn này

'Dấu ngoặc đơn' so với. "Dấu ngoặc kép"

Như tôi đã đề cập, cả hai thứ này đều được sử dụng để tạo chuỗi ký tự [giá trị] trong JavaScript và chúng hoạt động theo cùng một cách

Sự khác biệt đáng chú ý duy nhất giữa dấu ngoặc đơn và dấu ngoặc kép phát huy tác dụng khi chúng ta phải thoát ký tự

Nếu bạn sử dụng dấu nháy đơn để tạo chuỗi, bạn không thể sử dụng dấu nháy đơn trong chuỗi đó mà không thoát chúng bằng dấu gạch chéo ngược [\]

Lý thuyết tương tự áp dụng cho dấu ngoặc kép và bạn phải sử dụng dấu gạch chéo ngược để thoát khỏi bất kỳ dấu ngoặc kép nào bên trong dấu ngoặc kép

Tuy nhiên, bạn có thể sử dụng dấu ngoặc đơn bên trong dấu ngoặc kép hoặc dấu ngoặc kép bên trong dấu ngoặc đơn mà không thoát

Cá nhân tôi thích sử dụng dấu ngoặc kép để tạo chuỗi trong JavaScript. Nó làm cho các chuỗi dễ đọc hơn vì chúng tôi không sử dụng dấu gạch chéo ngược

Có bất kỳ lựa chọn thay thế?

Mặc dù dấu ngoặc đơn và dấu ngoặc kép là phổ biến nhất, nhưng chúng tôi có tùy chọn thứ 3 gọi là Backticks [``]

Backticks là một tính năng ES6 cho phép bạn tạo các chuỗi trong JavaScript

Mặc dù backticks chủ yếu được sử dụng cho mục đích nhúng mã hoặc HTML, nhưng chúng cũng hoạt động tương tự như dấu ngoặc đơn và dấu ngoặc kép. Bên cạnh đó, việc sử dụng backticks giúp thao tác chuỗi dễ dàng hơn

1. Nối chuỗi dễ dàng

2. Bạn không cần phải thoát khỏi dấu ngoặc đơn hoặc dấu ngoặc kép

3. Có thể viết nhiều dòng mà không cần sử dụng ký tự dòng mới

Với tất cả những ưu điểm này, sử dụng backticks dường như là một giải pháp thay thế tốt

Nhưng có bất kỳ sự khác biệt nào về hiệu suất khi chúng tôi sử dụng dấu ngoặc đơn, dấu ngoặc kép hoặc dấu nháy ngược không?

Hiệu suất giữa các loại báo giá khác nhau

Vì không có nhiều sự khác biệt trong 3 phương thức này nên tôi muốn xem liệu có khoảng cách đáng kể về hiệu suất giữa việc sử dụng dấu ngoặc đơn, dấu ngoặc kép và dấu nháy ngược không

Vì vậy, tôi đã viết một đoạn mã nhỏ để tạo chuỗi bằng cả 3 phương thức, chạy nó trong bảng điều khiển trình duyệt Chrome và sử dụng console.time để đo hiệu suất

function testingDoubleQuotes[]{
console.time[‘doublequotes’];
for [let i = 0; i < 100000; i++] {
const string1 = “String One”;
}
console.timeEnd[‘doublequotes’];
}
function testingSingleQuotes[]{
console.time[‘singlequotes’];
for [let i = 0; i < 100000; i++] {
const string2 = 'String Two';
}
console.timeEnd[‘singlequotes’];
}
function testingbackticks[]{
console.time[‘backticks’];
for [let i = 0; i < 100000; i++] {
const string1 = `String Three`;
}
console.timeEnd[‘backticks’];
}
testingDoubleQuotes[];
testingSingleQuotes[];
testingbackticks[];

Ban đầu, tôi bắt đầu với các giá trị nhỏ và nó không cho thấy sự khác biệt đáng kể. Sau đó, tôi đã tăng số lần vòng lặp chạy và kết quả sau đây cho thấy khoảng thời gian với 100000 lần lặp

Dựa trên các kết quả trên, backticks là tốt nhất và dấu ngoặc kép là tệ nhất. Tuy nhiên, tôi không tin rằng nó sẽ tác động đáng kể đến các chuỗi nhỏ mà chúng tôi sử dụng trong các dự án của mình

Cuối cùng, tất cả đều phụ thuộc vào sở thích cá nhân

Như bạn có thể đã hiểu bây giờ, không có sự khác biệt thực sự nào giữa việc sử dụng dấu ngoặc đơn, dấu ngoặc kép hoặc dấu nháy ngược. Bạn có thể chọn một hoặc nhiều kiểu tùy theo sở thích của mình. Tuy nhiên, luôn luôn tốt khi tuân theo một định dạng duy nhất trong suốt dự án để giữ cho nó gọn gàng và nhất quán

Ngoài ra, bạn có thể sử dụng trình định dạng mã và hướng dẫn kiểu để chăm sóc kiểu dáng cho bạn. Họ cũng có một loại dấu ngoặc kép ưa thích

  • Prettier sử dụng “Dấu ngoặc kép” theo mặc định
  • gjslint [Google Closure Linter] ủng hộ “Trích dẫn đơn”
  • eslint sử dụng "Dấu ngoặc kép" theo mặc định
  • Hướng dẫn phong cách Airbnb thích "Trích dẫn đơn"

Sử dụng một công cụ như vậy là cách được khuyên dùng nhất để giữ cho mã của bạn nhất quán và bạn cũng có thể định cấu hình các công cụ này theo lựa chọn ưa thích của mình

Có những trường hợp bạn buộc phải sử dụng một kiểu trích dẫn. Ví dụ: nếu bạn đang làm việc với JSON, bạn luôn cần sử dụng dấu ngoặc kép

Nhìn chung, tôi thích sử dụng dấu ngoặc kép hơn vì tôi cảm thấy nó giúp tôi dễ đọc hơn. Ngoài ra, tôi sử dụng backticks bất cứ khi nào tôi cần tận dụng các tính năng của nó như phép nội suy và chuỗi nhiều dòng

Những quy ước này có thể khác nhau từ người này sang người khác. Vì vậy, đừng quên chia sẻ ý tưởng của bạn với những người khác trong phần bình luận

Cảm ơn bạn đã đọc

Tham gia Medium với liên kết giới thiệu của tôi - Chameera Dulanga

Là thành viên Phương tiện, một phần phí thành viên của bạn sẽ được chuyển đến các tác giả mà bạn đã đọc và bạn có toàn quyền truy cập vào mọi câu chuyện…

chameeradulanga. vừa phải. com

Xây dựng các ứng dụng khác nhau

Các công cụ OSS như Bit cung cấp một mô hình mới để xây dựng các ứng dụng hiện đại

Thay vì phát triển các dự án nguyên khối, trước tiên bạn xây dựng các thành phần độc lập. Sau đó, bạn kết hợp các thành phần của mình lại với nhau để xây dựng bao nhiêu ứng dụng tùy thích. Đây không chỉ là cách xây dựng nhanh hơn mà còn có khả năng mở rộng hơn nhiều và giúp chuẩn hóa quá trình phát triển

Tôi nên sử dụng dấu ngoặc đơn hay dấu ngoặc kép trong TypeScript?

Giống như JavaScript, TypeScript cũng sử dụng dấu nháy kép ["] hoặc dấu nháy đơn ['] để bao quanh dữ liệu chuỗi. Google JavaScript Style Guide gợi ý thích trích dẫn đơn. " Để đảm bảo tính nhất quán, các dấu ngoặc đơn ['] được ưu tiên sử dụng hơn dấu ngoặc kép ["] . Điều này hữu ích khi tạo các chuỗi bao gồm HTML. ".

Bạn có thể sử dụng dấu ngoặc đơn trong JavaScript không?

Trong JavaScript, dấu nháy đơn [ '' ] và nháy kép [ “” ] được sử dụng để tạo chuỗi ký tự . Hầu hết các nhà phát triển sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép tùy ý họ và đôi khi họ để trình định dạng mã của mình quyết định sử dụng cái gì.

Bạn nên sử dụng HTML dấu ngoặc kép đơn hay kép?

rất nhiều trang web sử dụng dấu ngoặc kép cho HTML, vì vậy vui lòng sử dụng dấu ngoặc kép . nó cũng ảnh hưởng đến việc tìm kiếm trong tài liệu HTML, dấu ngoặc đơn và dấu ngoặc kép có hiệu lực.

JavaScript sẽ xử lý một số như thế nào khi nó được đặt trong dấu ngoặc kép hoặc dấu ngoặc đơn?

Chúng giống nhau . Việc lựa chọn kiểu trích dẫn là tùy thuộc vào người lập trình và kiểu này không có ngữ nghĩa đặc biệt hơn kiểu kia . Không có loại cho một ký tự trong JavaScript - mọi thứ luôn là một chuỗi.

Chủ Đề