介绍
在学习用口语写作之前,你必须先学习语法规则,以下是你可能在英语中找到的几个规则的例子:
- 一个句子以大字母开始
- 一个句子以一个期限结束
- 一个新的段落被插入
- 对话中插入双引文符号
同样,所有编程语言都必须遵守特定的规则才能运作,这套规则决定了编程语言的正确结构,被称为语法。
在本教程中,我们将讨论许多JavaScript语法和代码结构的规则和惯例。
功能性和可读性
功能和可读性是您开始使用 JavaScript 时专注于语法的两个重要原因。
某些语法规则对JavaScript功能是强制性的,如果不遵循这些规则,控制台将引发错误,脚本将停止执行。
请考虑在你好,世界!程序中的语法错误:
1[label broken.js]
2// Example of a broken JavaScript program
3console.log("Hello, World!"
此代码样本缺少关闭栏目,而不是将预期的Hello, World!打印到控制台,会出现以下错误:
1[secondary_label Output]
2Uncaught SyntaxError: missing ) after argument list
在脚本继续运行之前,必须添加缺少的 ),这是JavaScript语法中的错误如何破坏脚本的例子,因为正确的语法必须遵循才能运行代码。
JavaScript语法和格式化的一些方面是基于不同的思想学校的,也就是说,有些风格规则或选择不是强制性的,并且在运行代码时不会导致错误,但是,有很多常见的惯例是合理的,因为项目和代码库之间的开发人员将更熟悉该风格。
考虑以下三个变量分配的例子。
1const greeting="Hello"; // no whitespace between variable & string
2const greeting = "Hello"; // excessive whitespace after assignment
3const greeting = "Hello"; // single whitespace between variable & string
虽然上述三个例子在输出中都将完全相同,但第三个选项问候是编写代码的最常用的、最易读的方式,尤其是在较大的程序中考虑的。
从一个组织到另一个组织,你会遇到不同的指导方针来遵循,所以你也必须灵活。
我们将在下面介绍一些代码示例,以便您熟悉JavaScript代码的语法和结构,并在怀疑时参考本文。
白色空间
在JavaScript中,Whitespace 由间隔、标签和新闻线组成(键盘上按ENTER)。如前所示,字符串外部的过度白空间和操作员和其他符号之间的间隔被JavaScript忽略,这意味着以下三个变量分配示例将具有相同的计算输出:
1const userLocation = "New York City, " + "NY";
2const userLocation="New York City, "+"NY";
3const userLocation = "New York City, " + "NY";
userLocation将代表纽约市,纽约市,无论这些风格是写在脚本中,也不会对JavaScript产生区别,无论白色空间是用卡片或空间写的。
能够遵循最常见的白色空间惯例的一个很好的拇指规则是遵循与数学和语言语法相同的规则。
例如,让 x = 5 * y 比让 x = 5 * y 更易读。
您可能看到的这种风格的一个显着的例外是在分配多个变量时。
1const companyName = "DigitalOcean";
2const companyHeadquarters = "New York City";
3const companyHandle = "digitalocean";
所有分配操作员(=)都排列在一起,变量之后有白空间,这种类型的组织结构不是每个代码库都使用的,但可以用来提高可读性。
JavaScript 也忽略了过多的新闻线条,通常会将额外的新闻线条插入评论和代码块后面。
亲属
对于如果、交换和为等关键字,通常会添加间隙,然后再添加间隙,请注意以下比较和循环的例子。
1// An example of if statement syntax
2if () { }
3
4// Check math equation and print a string to the console
5if (4 < 5) {
6 console.log("4 is less than 5.");
7}
8
9// An example of for loop syntax
10for () { }
11
12// Iterate 10 times, printing out each iteration number to the console
13for (let i = 0; i <= 10; i++) {
14 console.log(i);
15}
正如我们所看到的,如果声明和为循环在围栏的每一侧都有白色空间(但不是围栏的内部)。
当代码与函数、方法或类有关时,关节将触及相应的名称。
1// An example function
2function functionName() {}
3
4// Initialize a function to calculate the volume of a cube
5function cube(number) {
6 return Math.pow(number, 3);
7}
8
9// Invoke the function
10cube(5);
在上面的例子中,‘cube()’是一个函数,并将包含参数或参数的关节对(())。在这种情况下,参数分别是‘数’或‘5’。尽管具有额外空间的‘cube()’是有效的,因为代码将按预期执行,但几乎从未被看到。
半色素
JavaScript 程序由一系列命令组成,称为陈述,正如书面段落由一系列句子组成一样。
1// A single JavaScript statement
2const now = new Date();
如果两个或两个以上的陈述相邻,则必须用半柱分开它们。
1// Get the current timestamp and print it to the console
2const now = new Date(); console.log(now);
如果语句是由新线分开的,半色是可选的。
1// Two statements separated by newlines
2const now = new Date()
3console.log(now)
一个安全和常见的惯例是将声明与半色分开,而不论新闻通讯。
1// Two statements separated by newlines and semicolons
2const now = new Date();
3console.log(now);
在为循环的初始化、条件和增加或减少之间也需要半色。
1for (initialization; condition; increment) {
2 // run the loop
3}
半色素在任何类型的区块声明之后包含 not,如如果,为,做,而,类,交换机和功能。
1// Initialize a function to calculate the area of a square
2function square(number) {
3 return Math.pow(number, 2);
4}
5
6// Calculate the area of a number greater than 0
7if (number > 0) {
8 square(number);
9}
要小心,因为并非所有嵌入曲线的代码都会没有半图形结束,物体都被嵌入曲线,并且应该以半图形结束。
1// An example object
2const objectName = {};
3
4// Initialize triangle object
5const triangle = {
6 type: "right",
7 angle: 90,
8 sides: 3,
9};
在每个JavaScript语句之后,除了区块语句外,包含半色素是普遍接受的做法,这些语句以弯曲的尾结尾。
指控
一个完整的JavaScript程序在技术上可以写在一个单一的行上,然而,这很快就会变得非常困难地阅读和维护。
下面是一个条件的如果 /else陈述的例子,写在一个行上或用新闻稿和注释。
1// Conditional statement written on one line
2if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }
3
4// Conditional statement with indentation
5if (x === 1) {
6 // execute code if true
7} else {
8 // execute code if false
9}
请注意,区块中包含的任何代码都是注入的。 注入可以用两个空格、四个空格或按卡字符来完成. 是否使用卡或空格取决于您的个人偏好(单人项目)或组织的指南(协作项目)。
如上面的示例中所示,包括第一行末尾的开头栏,是构建JavaScript封锁陈述和对象的常规方式。
1// Conditional statement with braces on newlines
2if (x === 1)
3{
4 // execute code if true
5}
6else
7{
8 // execute code if false
9}
这种风格在JavaScript中不像其他语言中那么常见,但并不陌生。
任何嵌入的区块声明将进一步注释。
1// Initialize a function
2function isEqualToOne(x) {
3 // Check if x is equal to one
4 if (x === 1) {
5 // on success, return true
6 return true;
7 } else {
8 return false;
9 }
10}
要保持可读性和减轻混淆,必须正确编写代码。 要记住这一规则的一个例外是,压缩库将删除不必要的字符,从而使文件大小更小,从而允许页面加载时间更快(如 jquery.min.js和 d3.min.js)。
识别者
在 JavaScript 中,变量、函数或属性的名称被称为 ** 标识符,标识符由字母和数字组成,但它们不能包含$和_以外的任何符号,也不能从一个数字开始。
敏感案例
以下两个例子,‘myVariable’和‘myvariable’将指两个不同的变量。
1var myVariable = 1;
2var myvariable = 2;
JavaScript 名称的惯例是,它们是用 camelCase 写的,这意味着第一个单词是 lowercase,但每一个接下来的单词都以 uppercase 字母开始。
1const INSURANCE_RATE = 0.4;
这个规则的例外是类名称,这些名称通常以上级字母(PascalCase)开头的每个单词写成。
1// Initialize a class
2class ExampleClass {
3 constructor() { }
4}
为了确保代码可读性,最好在整个程序文件中使用明显不同的标识符。
保留关键词
标识符也不能由任何保留的关键字组成。关键字是JavaScript语言中具有内置功能的单词,如var,if,for和this。
例如,您无法将值分配给名为var的变量。
1var var = "Some value";
由于JavaScript理解var是关键字,因此会导致语法错误:
1[label Output]
2SyntaxError: Unexpected token (1:4)
对于完整的参考,请参阅此 保留关键字列表(MDN)
结论
本文概述了JavaScript的基本语法和代码结构. 语法对于程序的正确执行以及您和您的代码的合作者的可读性和可维护性都很重要。
我们在本文中审查了许多常见的JavaScript语法和风格,但最终最重要的是要记住的是灵活和与您的团队或组织一致。