Hướng dẫn how do you name variables and functions in javascript? - làm thế nào để bạn đặt tên cho các biến và hàm trong javascript?

Giới thiệu

Đặt tên đúng các biến, chức năng và các lớp là rất quan trọng. Điều này làm cho mã của bạn dễ đọc hơn và dễ gỡ lỗi hơn. Trong bài viết này, tôi đã củng cố một số thực tiễn tốt nhất từ ​​các hướng dẫn phong cách như Google và Airbnb. Hầu hết các khung và thư viện JavaScript phổ biến đều tuân theo các thực tiễn tốt nhất này.

Trước khi chúng tôi bắt đầu, đây là những gì bạn cần biết trước.

Có nhiều kiểu trường hợp khác nhau được sử dụng trên các ngôn ngữ lập trình khác nhau để đặt tên cho các biến. Hãy để chúng tôi thảo luận về một số phong cách trường hợp.

• Trường hợp lạc đà: Đó là thực tiễn viết các cụm từ không có khoảng trắng hoặc dấu câu, cho thấy việc tách các từ với một chữ cái được viết hoa và từ đầu tiên bắt đầu bằng chữ thường. Ví dụ:

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  2: It is the practice of writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter, and the first word starting with lower case.
  Example:

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  2
• Trường hợp Pascal: Nó rất giống với trường hợp lạc đà, nhưng chữ cái đầu tiên bắt đầu với trường hợp trên. Ví dụ:

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  3: It is very similar to the camel case, but the first letter starts with the Upper case.
  Example:

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  3
• Trường hợp rắn: Ở đây chúng tôi tách các từ bằng cách sử dụng dấu gạch dưới (

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  4) và các từ có thể ở trường hợp thấp hơn hoặc trên. Ví dụ:

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  5 hoặc

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  6: Here we separate the words using underscore (

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  4) and the words can either be in lower or upper case.
  Example:

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  5 or

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  6

Bây giờ chúng ta đã học các phong cách trường hợp khác nhau, chúng ta hãy xem xét chi tiết cách đặt tên cho một biến, chức năng và các lớp trong JavaScript.

Đặt tên biến

Các biến trong JavaScript có thể có hai loại

• Các biến động: có giá trị tiếp tục thay đổi.

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  7 được sử dụng để xác định các biến động với các giá trị nguyên thủy (như chuỗi, boolean và số, v.v.). Và chúng tôi cũng sử dụng

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  8 để xác định các biến động với các giá trị không định hướng (như các đối tượng và mảng). Nó được ưa thích để sử dụng trường hợp lạc đà thấp hơn để đặt tên các biến động.: whose value keeps on changing.

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  7 is used to define the dynamic variables with primitive values (such as strings, boolean and numbers, etc.). And we also use

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  8 to define the dynamic variables with non-primitive values (such as objects and arrays). It is preferred to use Lower Camel Case for naming the dynamic variables.

• Các biến không đổi: có giá trị không đổi và không thay đổi.

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  8 được sử dụng để xác định các biến không đổi. Nó được ưu tiên sử dụng trường hợp trên để đặt tên các biến không đổi.: whose value remains constant and doesn’t change.

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  8 is used to define the constant variables. It is preferred to use Upper Case for naming the constant variables.

• Nếu tên các biến không đổi có nhiều hơn một từ, thì nên xác định nó bằng cách sử dụng kiểu vỏ rắn trên.

Chức năng đặt tên

Các tên chức năng cũng được ưa thích để được xác định bằng cách sử dụng kiểu vỏ Camel thấp hơn.

Đặt tên các lớp

Các tên lớp được ưu tiên được xác định bằng cách sử dụng kiểu chữ Pascal.

Đặt tên các thành phần phản ứng

Các thành phần phản ứng (cả hai thành phần lớp và chức năng) thường được đặt tên trong trường hợp Pascal.

Đặt tên các mô -đun nút được xuất (Node.js)

Nó được ưa thích để sử dụng vỏ Camel thấp hơn để đặt tên tên mô -đun nút được xuất.

Làm và don trong khi đặt tên một biến

• Tên biến nên bắt đầu bằng một chữ cái, dấu gạch dưới (

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  4) hoặc dấu hiệu đô la (

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  1).
• Tên biến không thể bắt đầu với các số hoặc bất kỳ ký tự đặc biệt nào ngoài dấu hiệu dấu gạch dưới hoặc đô la.
• Tên biến có thể có số, nhưng không phải ở đầu tên (chữ cái đầu tiên).
• Tên biến không thể có không gian.
• Don Tiết sử dụng bất kỳ từ khóa dành riêng nào của JavaScript, chẳng hạn như (

  // bad
  var dogname = 'Droopy'; 
  // bad
  var dog_name = 'Droopy'; 
  // bad
  var DOGNAME = ‘Droopy’; 
  // bad
  var DOG_NAME = 'Droopy'; 
  // good
  var dogName = 'Droopy';

  8,

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  3,

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  4,

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  5, v.v.).
• Sử dụng các tên có ý nghĩa như

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  6 hoặc

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  7 và tránh các tên/chữ viết tắt mơ hồ.
• Tên nên chỉ định giá trị nào nó đang giữ (như

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  8 hoặc

  // bad
  var d = 'Scooby-Doo';
  // bad
  var name = 'Scooby-Doo';
  // good
  var dogName = 'Scooby-Doo';

  9) trong trường hợp biến
• Tên nên chỉ định hành động của nó đang thực hiện (như

  // bad
  var bark = false;
  // good
  var isBark = false;
  // bad
  var ideal = true;
  // good
  var areIdeal = true;
  // bad
  var owner = true;
  // good
  var hasOwner = true;

  0 hoặc

  // bad
  var bark = false;
  // good
  var isBark = false;
  // bad
  var ideal = true;
  // good
  var areIdeal = true;
  // bad
  var owner = true;
  // good
  var hasOwner = true;

  1) trong trường hợp các chức năng.

Bản tóm tắt

Hãy để chúng tôi tóm tắt các mục chúng tôi đã học cho đến nay.

Cảm ơn đã ghé qua. Nếu bạn thích nội dung sẽ hỗ trợ tôi và theo dõi tôi để biết thêm nội dung như thế này.

Kết nối với tôi trên LinkedIn, Twitter và GitHub.

Thêm nội dung tại Plainenglish.ioplainenglish.io

Theo quy ước đặt tên tiêu chuẩn làm tăng khả năng đọc và giúp dễ hiểu mã của bạn hơn. Tuy nhiên, nhiều nhà phát triển không nhận thức được cách sử dụng các quy ước đặt tên một cách chính xác và đôi khi chúng làm cho mọi thứ trở nên phức tạp.

Trong bài viết này, tôi sẽ thảo luận về 10 thực tiễn tốt nhất của Công ước JavaScript bạn nên làm theo.

1. Đặt tên quy ước cho các biến

Tên biến JavaScript nhạy cảm trường hợp. Các chữ cái chữ thường và chữ hoa là khác biệt. Ví dụ: bạn có thể xác định ba biến duy nhất để lưu trữ tên chó, như sau.

var DogName = 'Scooby-Doo';
var dogName = 'Droopy';
var DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"

Tuy nhiên, cách được khuyến nghị nhất để khai báo các biến JavaScript là với tên biến trường hợp lạc đà. Bạn có thể sử dụng quy ước đặt tên trường hợp lạc đà cho tất cả các loại biến trong JavaScript và nó sẽ đảm bảo rằng có nhiều biến có cùng tên.camel case variable names. You can use the camel case naming convention for all types of variables in JavaScript, and it will ensure that there aren’t multiple variables with the same name.

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

Tên của các biến nên được tự giải thích và mô tả giá trị được lưu trữ. Ví dụ: nếu bạn cần một biến để lưu trữ tên chó, bạn nên sử dụng DogName thay vì chỉ tên vì nó có ý nghĩa hơn.

// bad
var d = 'Scooby-Doo';
// bad
var name = 'Scooby-Doo';
// good
var dogName = 'Scooby-Doo';

2. Đặt tên quy ước cho & nbsp; booleans

Khi nói đến các biến Boolean, chúng ta nên sử dụng là hoặc có tiền tố. Ví dụ: nếu bạn cần một biến Boolean để kiểm tra xem một con chó có chủ sở hữu hay không, bạn nên sử dụng HasoWNer làm tên biến.is or has as prefixes. For example, if you need a Boolean variable to check if a dog has an owner, you should use hasOwner as the variable name.

// bad
var bark = false;
// good
var isBark = false;
// bad
var ideal = true;
// good
var areIdeal = true;
// bad
var owner = true;
// good
var hasOwner = true;

3. Đặt tên quy ước cho các chức năng Convention for Functions

Tên chức năng JavaScript cũng nhạy cảm trường hợp. Vì vậy, tương tự như các biến, cách tiếp cận trường hợp lạc đà là cách được khuyến nghị để khai báo tên chức năng.camel case approach is the recommended way to declare function names.

Ngoài ra, bạn nên sử dụng danh từ và động từ mô tả làm tiền tố. Ví dụ: nếu chúng ta khai báo một hàm để truy xuất tên, tên hàm phải là getName.

// bad
function name(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

// good
function getName(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

4. Đặt tên quy ước cho các hằng số

Hằng số JavaScript cũng nhạy cảm trường hợp. Tuy nhiên, các hằng số này nên được viết bằng chữ hoa vì chúng là các biến không thay đổi.uppercase because they are nonchanging variables.

var LEG = 4;
var TAIL = 1;
var MOVABLE = LEG + TAIL;

Nếu tên khai báo biến chứa nhiều từ, bạn nên sử dụng Upper_Snake_case. & NBSP;UPPER_SNAKE_CASE. 

var DAYS_UNTIL_TOMORROW = 1;

Tất cả các hằng số nên được xác định khi bắt đầu tệp, phương thức hoặc lớp của bạn.

5. Đặt tên quy ước cho & nbsp; các lớp

Đặt tên quy tắc quy ước cho các lớp JavaScript khá giống với các chức năng. Chúng tôi phải sử dụng các tiêu đề mô tả giải thích các khả năng của lớp.

Sự khác biệt chính giữa tên chức năng và tên lớp là chúng ta phải sử dụng trường hợp Pascal cho tên lớp.Pascal case for class names.

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

6. Đặt tên quy ước cho các thành phần

Các thành phần JavaScript được sử dụng rộng rãi trong các khung phía trước như React. Mặc dù các thành phần được sử dụng trong DOM, nhưng việc xử lý chúng tương tự như các lớp và sử dụng trường hợp Pascal để xác định tên được khuyến nghị.Pascal case to define names is recommended.

// bad
function dogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
} 

// good
function DogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
}

Vì chữ cái ban đầu luôn được viết bằng chữ hoa, một thành phần nổi bật so với các thành phần HTML và Web gốc khi được sử dụng.

<div> 
  <DogCartoon 
    roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} 
  />
</div>

7. Đặt tên quy ước cho & nbsp;

Mặc dù có một số khác biệt, cấu trúc của hàm JavaScript và phương pháp là khá giống nhau. Vì vậy, đặt tên quy tắc quy ước là như nhau.

Chúng ta phải sử dụng trường hợp lạc đà để khai báo các phương thức JavaScript và sử dụng các động từ làm tiền tố để làm cho tên có ý nghĩa hơn.camel case to declare JavaScript methods and use verbs as prefixes to make names more meaningful.

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

8. Đặt tên quy ước để biểu thị & nbsp; chức năng riêng tư

Dấu gạch dưới (_) được sử dụng rộng rãi trong các ngôn ngữ như MySQL và PHP để xác định các biến, hàm và phương thức. Nhưng trong JavaScript, một dấu gạch dưới được sử dụng để biểu thị các biến hoặc hàm riêng tư.

Ví dụ: nếu bạn có tên hàm riêng như Toonname, bạn có thể biểu thị nó là hàm riêng bằng cách thêm dấu gạch dưới dưới dạng tiền tố (_toonName).

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

9. Quy ước đặt tên cho các biến toàn cầu

Đối với các biến JavaScript toàn cầu, không có tiêu chuẩn đặt tên cụ thể.

Nên sử dụng trường hợp lạc đà cho các biến toàn cầu có thể thay đổi và chữ hoa cho các biến toàn cầu bất biến.camel case for mutable global variables and uppercase for immutable global variables.

10. Đặt tên quy ước cho Tệp & NBSP; Tên

Hầu hết các máy chủ web (Apache, UNIX) đều nhạy cảm với trường hợp khi nói đến việc xử lý các tệp. Ví dụ, Flower.jpg là hoa.jpg.flower.jpg isn’t Flower.jpg.

Mặt khác, các máy chủ web, chẳng hạn như Microsoft, IIS, không quan tâm đến vụ việc. Trong các máy chủ như vậy, bạn có thể sử dụng Flower.jpg hoặc Flower.jpg để truy cập hoa.jpg.Flower.jpg or flower.jpg to access Flower.jpg.

Tuy nhiên, nếu bạn chuyển từ một máy chủ không nhạy cảm với máy chủ nhạy cảm trường hợp, ngay cả một lỗi nhỏ cũng có thể khiến trang web của bạn gặp sự cố.

Vì vậy, nên sử dụng tên tệp thường trong tất cả các máy chủ mặc dù hỗ trợ nhạy cảm trường hợp của chúng.lowercase file names in all servers despite their case-sensitive support.

Sự kết luận

Trong bài viết này, tôi đã thảo luận về 10 quy ước đặt tên JavaScript có thể được sử dụng để cải thiện kỹ năng mã hóa của chúng tôi. Là nhà phát triển, chúng tôi nên luôn tuân thủ các thực tiễn tốt nhất, vì điều đó sẽ tăng khả năng đọc và giúp bạn và nhóm của bạn dễ hiểu về mã của bạn hơn.

Tôi hy vọng những đề xuất đó sẽ giúp bạn cải thiện kỹ năng mã hóa của bạn. Cảm ơn bạn đã đọc.

Bộ JavaScript SyncFusion sẽ là bộ duy nhất bạn cần để xây dựng một ứng dụng. Nó chứa hơn 65 thành phần UI hiệu suất cao, nhẹ, mô-đun và đáp ứng trong một gói. Tải xuống bản dùng thử miễn phí và đánh giá các điều khiển ngay hôm nay.

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, bạn có thể liên hệ với chúng tôi thông qua các diễn đàn hỗ trợ của chúng tôi, & NBSP; Cổng thông tin hỗ trợ, hoặc & NBSP; Cổng thông tin phản hồi. Chúng tôi luôn sẵn lòng hỗ trợ bạn!

Blog liên quan

• Chức năng thuần khiết và không trong sạch trong JavaScript: Hướng dẫn đầy đủ
• Giới thiệu Kiểm soát Breadcrumb JavaScript trong Essential JS 2
• Dễ dàng sử dụng điều khiển JavaScript trong ứng dụng máy chủ Blazor
• Giới thiệu điều khiển pad chữ ký JavaScript & NBSP; trong JS 2 Essential JS 2

Làm thế nào để bạn đặt tên cho một biến trong JavaScript?

Làm thế nào để bạn đặt tên cho một hàm trong javascript?

Làm thế nào để bạn đặt tên cho các biến và chức năng?

Làm thế nào để bạn đặt tên cho các biến của bạn?