Obtenez une compréhension plus approfondie de la syntaxe et de la structure du code en JavaScript

Tous les langages de programmation doivent respecter des règles spécifiques pour fonctionner. L'ensemble des règles qui déterminent la structure correcte d'un langage de programmation est appelé sa grammaire. De nombreux langages de programmation se composent principalement de concepts similaires avec des variations syntaxiques.

Dans ce tutoriel, nous aborderons les nombreuses règles et conventions de la syntaxe JavaScript et de la structure du code. [Recommandations de cours associées : Tutoriel vidéo JavaScript]

Fonctionnalité et lisibilité

Lorsque vous commencez à utiliser JavaScript, les fonctionnalités et la lisibilité sont deux raisons importantes de prêter attention à la grammaire.

Certaines règles de syntaxe sont requises pour que JavaScript fonctionne. Si vous ne les suivez pas, la console générera une erreur et le script cessera de s'exécuter.

Considérez les erreurs grammaticales dans « Hello, World ! » Programme :

// Example of a broken JavaScript program
console.log("Hello, World!"

Dans cet exemple de code, il manque le crochet fermant et n'imprime pas le "Hello, World!" attendu sur la console, ce qui entraîne l'erreur suivante :

Uncaught SyntaxError: missing ) after argument list

doit être ajouté avant. le script peut continuer à s'exécuter Missing ")". Ceci est un exemple de la façon dont les erreurs de syntaxe JavaScript peuvent interrompre un script, car une syntaxe correcte doit être suivie pour que le code s'exécute.

Certains aspects de la syntaxe et du formatage JavaScript reposent sur différentes écoles de pensée. Autrement dit, certaines règles ou choix de style ne sont pas obligatoires et ne provoqueront pas d'erreurs lors de l'exécution du code. Cependant, il existe de nombreuses conventions communes qui méritent d'être suivies à mesure que les développeurs de tous les projets et bases de code se familiariseront davantage avec ce style. Le respect des conventions communes améliore la lisibilité.

Considérez les trois exemples suivants d'affectation de variables.

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

Bien que les trois exemples ci-dessus fonctionnent exactement de la même manière dans la sortie, la troisième option Greeting = "Hello" est de loin la manière la plus courante et la plus lisible d'écrire du code, en particulier en gros lorsqu'elle est considérée dans le contexte. du programme.

Il est important de maintenir un style cohérent tout au long de votre projet de codage. Vous rencontrerez des directives différentes d’une organisation à l’autre, vous devrez donc également faire preuve de flexibilité.

Nous présenterons quelques exemples de code ci-dessous afin que vous puissiez vous familiariser avec la syntaxe et la structure du code JavaScript et vous référer à cet article lorsque vous avez des questions.

Espace blanc

L'espace blanc en JavaScript se compose de caractères d'espace, de tabulation et de nouvelle ligne (appuyez sur le clavier ENTRÉE). Comme mentionné précédemment, JavaScript ignore les espaces excessifs en dehors des chaînes et les espaces entre les opérateurs et autres symboles. Cela signifie que les trois exemples d'affectation de variables suivants auront exactement le même résultat calculé :

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

userLocation représentera "New York City, NY", quel que soit le style écrit dans le script, il existe également aucun effet sur JavaScript, que les espaces soient écrits avec des tabulations ou des espaces.

Une bonne règle de base pour suivre les conventions d'espacement les plus courantes est de suivre les mêmes règles que pour la syntaxe mathématique et linguistique.

Une exception notable à ce style concerne l'attribution de plusieurs variables. Notez la position de = dans l'exemple suivant :

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

Tous les opérateurs d'affectation (=) sont sur une seule ligne, avec des espaces après les variables. Ce type de structure organisationnelle n'est pas utilisé par toutes les bases de code, mais il peut être utilisé pour améliorer la lisibilité.

JavaScript ignorera les nouvelles lignes supplémentaires. En règle générale, des sauts de ligne supplémentaires sont insérés au-dessus des commentaires et après les blocs de code.

Parenthèses

Pour les mots-clés tels que if, switch et for, des espaces sont généralement ajoutés avant et après les parenthèses. Observez les exemples de comparaison et de boucle ci-dessous.

// An example of if statement syntax
if () { }
// Check math equation and print a string to the console
if (4 < 5) {
    console.log("4 is less than 5.");
    }
// An example of 
for loop syntaxfor () { }
// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
    console.log(i);
    }

les instructions if et les boucles for ont des espaces de chaque côté des parenthèses (mais pas à l'intérieur des parenthèses).

Lorsque le code appartient à une fonction, une méthode ou une classe, les parenthèses toucheront le nom correspondant.

// An example 
functionfunction functionName() {}
// Initialize a function to calculate the volume of a cube
function cube(number) {
    return Math.pow(number, 3);
}
// Invoke the function
cube(5);

Dans l'exemple ci-dessus, cube() est une fonction et la paire bracket() contiendra le ou les arguments. Dans ce cas, les paramètres sont respectivement des nombres ou 5. Bien que cube() avec un espace supplémentaire soit valide dans la mesure où le code s'exécutera comme prévu, il est presque invisible. Les rassembler permet d'associer facilement le nom de la fonction à la paire de parenthèses et à tous les paramètres passés associés.

Point-virgule

Les programmes JavaScript sont constitués d'une série d'instructions appelées instructions, tout comme un paragraphe écrit est constitué d'une série de phrases. Alors que les phrases se terminent par un point, les instructions JavaScript se terminent généralement par un point-virgule (;).

// A single JavaScript statement
const now = new Date();

Si deux instructions ou plus sont adjacentes, elles doivent être séparées par un point-virgule.

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

Un point-virgule est facultatif si les instructions sont séparées par des nouvelles lignes.

// Two statements separated by newlines
const now = new Date()
console.log(now)

Une convention sûre et courante consiste à séparer les instructions par des points-virgules, indépendamment des nouvelles lignes. En général, il est considéré comme une bonne pratique de les inclure afin de réduire le risque d’erreur.

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

Un point-virgule est également requis entre l'initialisation, la condition et l'incrémentation ou la décrémentation d'une boucle for.

for (initialization; condition; increment) { 
   // run the loop
   }

分号不包括在任何类型的块语句之后，例如if、for、do、while、class、switch和function。这些块语句包含在大括号中。请注意下面的示例。

// Initialize a function to calculate the area of a square
function square(number) {
    return Math.pow(number, 2);
    }
    // Calculate the area of a number greater than 0
    if (number > 0) {
    square(number);
    }

注意，并非所有用大括号括起来的代码都以分号结尾。对象用大括号括起来，并以分号结尾。

// An example object
const objectName = {};
// Initialize triangle object
const triangle = {
    type: "right",
    angle: 90,
    sides: 3,};

在除了块语句之外的每个JavaScript语句之后包含分号是广为接受的做法，这些语句以大括号结尾。

缩进

从技术上讲，完整的JavaScript程序可以在一行中编写。 但是，这很快就会变得非常难以阅读和维护。 相反，我们使用换行符和缩进。

下面是一个条件if/else语句的例子，它要么写在一行上，要么用换行符和缩进。

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }
// Conditional statement with indentation
if (x === 1) {
    // execute code if true
    }else {
        // execute code if false
        }

请注意，块中包含的任何代码都是缩进的。缩进可以用两个空格、四个空格或按制表符来完成。选项卡或空间的使用取决于您的个人偏好（对于单独项目）或组织的指导方针（对于协作项目）。

像上面的例子一样，在第一行末尾包括左大括号是构造JavaScript块语句和对象的常规方法。您可能看到块语句编写的另一种方式是在它们自己的行上使用大括号。

// Conditional statement with braces on newlines
if (x === 1){
    // execute code if true
    }else{
    // execute code if false
    }

这种风格在JavaScript中不像在其他语言中那样常见，但并非闻所未闻。

任何嵌套的block语句都将进一步缩进。

// Initialize a functionfunction isEqualToOne(x) {
    // Check if x is equal to one
    if (x === 1) {        // on success, return true
        return true;
    } else {      return false;
    }
}

正确的代码缩进对于保持可读性和减少混乱是必不可少的。要记住这个规则的一个例外是，压缩的库将删除不必要的字符，因此呈现较小的文件大小以加快页面加载时间（如jquery.min.js和d3.min.js）。

身份标识

变量、函数或属性的名称在JavaScript中称为标识符。标识符由字母和数字组成，但不能包含$和u之外的任何符号，也不能以数字开头。

区分大小写

这些名称区分大小写。以下两个示例myvariable和myvariable将引用两个不同的变量。

var myVariable = 1;
var myvariable = 2;

javascript名称的惯例是用camelcase编写，这意味着第一个单词是小写的，但后面的每个单词都以大写字母开头。您还可以看到用大写字母书写的全局变量或常量，用下划线分隔。

const INSURANCE_RATE = 0.4;

这个规则的例外是类名，它通常是以大写字母（pascalcase）开头的每个单词编写的。

// Initialize a class
class ExampleClass {
    constructor() { }
}

为了确保代码可读，最好在程序文件中使用明显不同的标识符。

保留关键字

标识符也不能由任何保留关键字组成。关键字是JavaScript语言中具有内置功能的单词，如var、if、for和this。

例如，您不能将值赋给名为var的变量。

var var = "Some value";

由于JavaScript理解var为关键字，因此会导致语法错误：

SyntaxError: Unexpected token (1:4)

本文来自 js教程 栏目，欢迎学习！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!