Comment faire des maths en JavaScript avec des opérateurs

introduction

Les opérations mathématiques font partie des fonctionnalités les plus fondamentales et universelles de tout langage de programmation. En JavaScript, les nombres sont fréquemment utilisés pour des tâches courantes telles que la recherche des dimensions de la taille de la fenêtre du navigateur, l’obtention du prix final d’une transaction monétaire et le calcul de la distance entre les éléments d’un document de site Web.

Bien que la compréhension de haut niveau en mathématiques ne soit pas une condition préalable pour être un développeur capable, il est important de savoir quels types d’opérations sont disponibles en JavaScript et comment utiliser les mathématiques en tant qu’outil pour effectuer des tâches pratiques.

Contrairement aux autres langages de programmation, JavaScript ne possède qu’un seul type de données number; Par exemple, il n’y a pas de distinction entre les entiers (nombres entiers positifs ou négatifs) et les flottants (nombres avec un point décimal).

Dans ce didacticiel, nous allons passer en revue les opérateurs arithmétiques, les opérateurs d’affectation et l’ordre des opérations utilisé avec les types de données de nombre JavaScript.

Opérateurs Arithmétiques

Les opérateurs arithmétiques * sont des symboles qui indiquent une opération mathématique et renvoient une valeur. Dans l’équation «3 + 7 = 10 +», la syntaxe «++» est la syntaxe qui signifie addition.

JavaScript a de nombreux opérateurs familiers des mathématiques de base, ainsi que quelques opérateurs supplémentaires spécifiques à la programmation.

Voici un tableau de référence des opérateurs arithmétiques JavaScript.

Operator Syntax Example Definition

Operator	Syntax	Example	Definition
Addition	`+`	`x + y`	Sum of `x` and `y`
Subtraction	`-`	`x - y`	Difference of `x` and `y`
Multiplication	`*`	`x * y`	Product of `x` and `y`
Division	`/`	`x / y`	Quotient of `x` and `y`
Modulo	`%`	`x % y`	Remainder of `x / y`
Exponentiation	`**`	`x ** y`	`x` to the `y` power
Increment		`x++`	`x` plus one
Decrement	`--`	`x--`	`x` minus one

Addition

+

x + y

Sum of x and y

Subtraction

-

x - y

Difference of x and y

Multiplication

*

x * y

Product of x and y

Division

/

x / y

Quotient of x and y

Modulo

%

x % y

Remainder of x / y

Exponentiation

**

x ** y

x to the y power

Increment

x++

x plus one

Decrement

--

x--

x minus one

Nous détaillerons chacun de ces opérateurs tout au long de cet article.

Addition et soustraction

Les opérateurs * Addition * et * subtraction * sont disponibles en JavaScript et peuvent être utilisés pour trouver la somme et la différence de valeurs numériques. JavaScript a une calculatrice intégrée et les opérations mathématiques peuvent être effectuées directement dans la console.

Nous pouvons faire quelques additions simples avec des nombres, par exemple en ajoutant + 10 + et '+ 20 + , en utilisant le signe plus ( + `).

10 + 20;

Output30

En plus de faire des mathématiques avec des nombres simples, nous pouvons également affecter des nombres à des variables et effectuer les mêmes calculs. Dans ce cas, nous assignerons les valeurs numériques à + x + et + y + et placerons la somme dans + z +.

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z);

Output30

De même, nous utilisons le signe moins (+ - +) pour soustraire des nombres ou des variables représentant des nombres.

// Assign values to x and y
let x = 10;
let y = 20;

// Subtract x from y and assign the difference to z
let z = y - x;

console.log(z);

Output10

Nous pouvons également additionner et soustraire avec des nombres négatifs et des flottants (décimales).

// Assign values to x and y
let x = -5.2;
let y = 2.5;

// Subtract y from x and assign the difference to z
let z = x - y;

console.log(z);

Output-7.7

Une chose intéressante à noter et à prendre en compte en JavaScript est le résultat de l’ajout d’un numéro et d’une string . Nous savons que «+1 + 1 +» devrait être égal à «+2 +», mais cette équation aura des résultats inattendus.

let x = 1 + "1";

console.log(x);
typeof x;

Output11
'string'

Au lieu d’ajouter les deux nombres, JavaScript convertira l’intégralité de l’instruction en une chaîne et concatenate eux autres ensemble. Il est important de faire attention à la nature JavaScript typée dynamiquement, car elle peut avoir les résultats souhaités.

Une raison commune d’utiliser l’addition ou la soustraction en JavaScript serait de faire défiler jusqu’à un identifiant moins la hauteur en pixels d’une barre de navigation fixe.

function scrollToId() {
   const navHeight = 60;
   window.scrollTo(0, window.pageYOffset - navHeight);
}

window.addEventListener('hashchange', scrollToId);

Dans l’exemple ci-dessus, cliquer sur un identifiant fera défiler jusqu’à 60 pixels au-dessus de l’identifiant.

L’addition et la soustraction sont deux des équations mathématiques les plus courantes que vous utiliserez en JavaScript.

Multiplication et division

Les opérateurs * Multiplication * et * Division * sont également disponibles en JavaScript et permettent de rechercher le produit et le quotient de valeurs numériques.

Un astérisque (+ * +) est utilisé pour représenter l’opérateur de multiplication.

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z);

Output100

La multiplication peut être utilisée pour calculer le prix d’un article après application de la taxe de vente.

const price = 26.5;    // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
totalPrice.toFixed(2);

console.log("Total:", totalPrice);

OutputTotal: 28.67

Une barre oblique (+ / +) est utilisée pour représenter l’opérateur de division.

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z);

Output4

La division est particulièrement utile pour calculer le temps, par exemple pour trouver le nombre d’heures dans une quantité de minutes ou pour calculer le pourcentage de réponses correctes complétées dans un test.

Modulo

Un opérateur arithmétique légèrement moins familier est l’opérateur modulo (parfois appelé module), qui calcule le reste d’un quotient après la division. Modulo est représenté par un signe de pourcentage (+% +).

Par exemple, nous savons que «+ 3 » entre dans « 9 +» exactement trois fois, et qu’il n’y a pas de reste.

9 % 3;

Output0

Nous pouvons utiliser l’opérateur modulo pour déterminer si un nombre est pair ou impair, comme vu avec cette fonction:

// Initialize function to test if a number is even
const isEven = x => {
   // If the remainder after dividing by two is 0, return true
   if (x % 2 === 0) {
       return true;
   }
   // If the number is odd, return false
   return false;
}

// Test the number
isEven(12);

Outputtrue

Dans l’exemple ci-dessus, + 12 + se divise également en + 2 +, il s’agit donc d’un nombre pair.

Souvent, en programmation, modulo est utilisé conjointement avec des instructions conditionnelles pour le contrôle de flux.

Exponentiation

Exponentiation * est l’un des opérateurs les plus récents en JavaScript, et il nous permet de calculer la puissance d’un nombre par son exposant. La syntaxe pour l’exponentiation est deux astérisques à la suite (+ ** +).

10 au cinquième pouvoir, ou 10 ^ 5, est écrit comme ceci:

10 ** 5;

Output100000

«10 ** 5 +» représente la même chose que « 10 » multiplié par « 10 +» cinq fois:

10 * 10 * 10 * 10 * 10;

Une autre façon d’écrire cela est d’utiliser la méthode + Math.pow () +.

Math.pow(10, 5);

Output100000

L’utilisation de l’opérateur exponentiation est un moyen concis de rechercher la puissance d’un nombre donné, mais comme d’habitude, il est important de rester cohérent avec le style de votre base de code lors du choix entre une méthode et un opérateur.

Incrément et Décrément

Les opérateurs * Incrémenter * et * Décrémenter * augmentent ou diminuent la valeur numérique d’une variable de un. Ils sont représentés par deux signes plus () ou deux signes moins (+ - +), et sont souvent utilisés avec https://www.digitalocean.com/community/tutorials/how-to -construct-for-loops-in-javascript # pour-loop [boucles].

Notez que les opérateurs d’incrémentation et de décrémentation ne peuvent être utilisés que sur des variables; tenter de les utiliser sur un nombre brut entraînera une erreur.

7++

OutputUncaught ReferenceError: Invalid left-hand side expression in postfix operation

Les opérateurs d’incrémentation et de décrémentation peuvent être classés en tant qu’opération préfixe ou postfixe, selon que l’opérateur est placé ou non avant ou après la variable.

Premièrement, nous pouvons envoyer l’incrémentation du préfixe par SMS avec «+ x +».

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);

Output8

La valeur de «+ x » a été augmentée de un. Pour voir la différence, nous allons tester l’incrémentation postfixée, avec ` y +`.

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);

Output7

La valeur de + y + n’a pas été augmentée dans l’opération postfixée. En effet, la valeur ne sera incrémentée qu’après l’évaluation de l’expression. Exécuter l’opération deux fois augmentera alors la valeur.

let y = 7;

y++;
y++;

console.log(y);

Output8

L’opérateur d’incrémentation ou de décrémentation sera vu le plus souvent dans une boucle. Dans cet exemple de boucle + pour +, nous exécuterons l’opération dix fois, en commençant par + 0 +, et en augmentant la valeur de + 1 + à chaque itération.

// Run a loop ten times
for (let i = 0; i < 10; i++) {
 console.log(i);
}

Output0
1
2
3
4
5
6
7
8
9

Le code ci-dessus montre une itération à travers une boucle obtenue à l’aide de l’opérateur d’incrémentation.

On peut penser que + x +++ est un raccourci pour + x = x + 1 +, et + x - + comme un raccourci pour + x = x - 1 +.

Opérateurs d’assignation

L’un des opérateurs les plus utilisés est l’opérateur * Affectation *, que nous avons déjà vu. Il est représenté par un signe égal (+ = +). Nous utilisons + = + pour assigner une valeur à droite à une variable à gauche.

// Assign 27 to age variable
let age = 27;

En plus de l’opérateur d’affectation standard, JavaScript comporte * des opérateurs d’affectation composés *, qui associent un opérateur arithmétique à + = +.

Par exemple, l’opérateur d’addition commencera par la valeur d’origine et ajoutera une nouvelle valeur.

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);

Output30

Dans ce cas, + age + = 3 + est identique à l’écriture + age = age + 3 +.

Tous les opérateurs arithmétiques peuvent être combinés avec une affectation pour créer des opérateurs d’affectation composés. Vous trouverez ci-dessous une table de référence des opérateurs d’affectation en JavaScript.

Operator Syntax

Operator	Syntax
Assignment	`=`
Addition assignment	`+=`
Subtraction assignment	`-=`
Multiplication assignment	`*=`
Division assignment	`/=`
Remainder assignment	`%=`
Exponentiation assignment	`**=`

Assignment

=

Addition assignment

+=

Subtraction assignment

-=

Multiplication assignment

*=

Division assignment

/=

Remainder assignment

%=

Exponentiation assignment

**=

Les opérateurs d’assignation composés sont souvent utilisés avec des boucles, similaires à l’incrémentation et à la décrémentation, et sont utilisés lorsque des équations doivent être répétées ou automatisées.

Préséance de l’opérateur

Même si nous lisons de gauche à droite, les opérateurs seront évalués par ordre de priorité, tout comme en mathématiques classiques.

Dans l’exemple suivant, la multiplication a une priorité supérieure à l’addition, ce qui détermine le résultat de l’équation.

// First multiply 3 by 5, then add 10
10 + 3 * 5;

Output25

Si, au lieu de cela, nous aimerions exécuter l’opération d’addition en premier, nous devrions la regrouper entre parenthèses, qui ont toujours la priorité la plus élevée.

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;

Output65

Vous trouverez ci-dessous un tableau de référence indiquant la priorité des opérateurs arithmétiques en JavaScript, du plus élevé au plus bas. Pour incrémenter et décrémenter, postfix a une priorité plus élevée que préfixe.

L’incrémentation / décrémentation, la multiplication / division et l’addition / soustraction ont le même niveau de priorité.

Operator Syntax

Operator	Syntax
Parentheses	`()`
Incrementation
Decrementation	`--`
Exponentiation	`**`
Multiplication	`*`
Division	`/`
Addition	`+`
Subtraction	`-`

Parentheses

()

Incrementation

Decrementation

--

Exponentiation

**

Multiplication

*

Division

/

Addition

+

Subtraction

-

La priorité des opérateurs inclut non seulement les opérateurs arithmétiques, mais également les opérateurs d’affectation, les opérateurs logiques, les opérateurs conditionnels, etc. Pour obtenir une liste complète, consultez la page operator sur le réseau MDN (Mozilla Developer Network).

Conclusion

Dans cet article, nous avons abordé la syntaxe et les opérateurs arithmétiques, y compris de nombreux opérateurs mathématiques connus et quelques-uns spécifiques à la programmation.

De plus, nous avons appris à combiner l’arithmétique et l’affectation pour créer des opérateurs d’affectation composés et l’ordre des opérations en JavaScript.

TOC

Comment faire des maths en JavaScript avec des opérateurs

introduction

Opérateurs Arithmétiques

Addition et soustraction

Multiplication et division

Modulo

Exponentiation

Incrément et Décrément

Opérateurs d’assignation

Préséance de l’opérateur

Conclusion

Related