Un guide pour arrondir les nombres en JavaScript

Dans cet article, nous allons explorer différentes manières d’arrondir les nombres en JavaScript. Cela inclura l’utilisation de fonctions mathématiques JavaScript et d’autres méthodes d’arrondi aux décimales. Nous couvrirons également les pièges à surveiller lors de l’arrondissement des nombres.

Arrondi JavaScript

Lorsqu’il s’agit de valeurs numériques, nous pouvons parfois effectuer des calculs qui aboutissent à des fractions qui doivent être arrondies à un nombre entier, comme lorsque vous calculez un prix moyen ou que vous traitez des nombres aléatoires.. Heureusement, JavaScript Math L’objet fournit un certain nombre de façons d’arrondir les nombres à une valeur entière.

Dans nos exemples, nous utiliserons deux des constantes mathématiques les plus importantes pour démontrer différents types d’arrondi : Piqui est le rapport de la circonférence d’un cercle à son diamètre, et e, qui est la base des logarithmes naturels et également connu sous le nom de « nombre d’Euler ». Ces deux valeurs sont des propriétés de Math objet, mais attribuons-les à certaines variables pour les rendre plus faciles à gérer :

const PI = Math.PI
const E = Math.E

Conseil de pro : vous pouvez également effectuer cette affectation sur une seule ligne à l’aide de déstructuration d’objet:

const { PI,E } = Math

Maintenant que ces constantes sont définies, examinons certaines des méthodes d’arrondi des nombres en JavaScript.

Arrondir des nombres en JavaScript avec Math.round

La première méthode que nous allons examiner est Math.round. C’est l’option la plus simple, et arrondit simplement n’importe quel nombre avec une partie décimale à l’entier le plus proche. Il utilise cette règle : si un nombre est exactement à mi-chemin entre deux entiers, il sera arrondi en haut. Par exemple, 2,5 arrondira à 3.

Pour utiliser cette méthode, nous fournissons simplement le nombre que nous voulons arrondir comme argument :

Math.round(2.3) 
<< 2

Math.round(2.921) 
<< 3

Math.round(2.5) 
<< 3

Math.round(PI)
<< 3

Math.round(E)
<< 3

Math.round() est pratique si vous souhaitez arrondir un nombre à la valeur entière la plus proche. Par exemple, si vous calculiez le score moyen sur trois tests, vous ajouteriez les trois scores et diviseriez par trois. Cela peut ne pas donner un nombre entier, vous utiliserez donc Math.round() pour l’arrondir à la valeur la plus proche :

const test1 = 86;
const test2 = 93;
const test3 = 95;
const average = Math.round((test1+test2+test3)/3);
<< 91

Arrondir des nombres avec Math.floor

La prochaine méthode que nous allons examiner est Math.floor. Cela arrondit toujours une valeur vers le bas à l’entier ci-dessous (le nom implique que le nombre est poussé vers le bas sol):

Math.floor(2.3) 
<< 2

Math.floor(2.921) 
<< 2

Math.floor(2.5) 
<< 2

Math.floor(PI)
<< 3

Math.floor(E)
<< 2

Une utilisation courante de Math.floor est lors de la création d’entiers aléatoires. Arrondi vers le bas garantit que l’entier commencera à zéro et que chaque entier aura une chance égale d’être renvoyé. Commencer à zéro est généralement utile, car les tableaux en JavaScript sont indexés à zéro, donc arrondir à l’inférieur garantira que le premier élément du tableau pourra être sélectionné. L’exemple ci-dessous montre comment un élément aléatoire peut être sélectionné dans un tableau en utilisant Math.floor:

const fruit = ["🍏","🍌","🍓","🍋","🍐"]

const randomFruit = fruit[Math.floor(Math.random()*fruit.length)]
<< "🍓"

Arrondi vers le bas utilisant Math.floor dans le code ci-dessus garantit qu’un index compris entre 0 et 4 est renvoyé, de sorte que chaque élément du tableau a une chance égale d’être sélectionné.

Arrondir des nombres avec Math.ceil

En parlant d’arrondir, c’est exactement ce que Math.ceil Est-ce que. Le nom vient de plafond et est le contraire de solce qui implique que la valeur va en haut. La méthode fonctionne de la même manière que toutes les autres. Fournissez simplement le nombre que vous souhaitez arrondir comme argument :

Math.ceil(2.3) 
<< 3

Math.ceil(2.921) 
<< 3

Math.ceil(2.5) 
<< 3

Math.ceil(PI)
<< 4

Math.ceil(E)
<< 3

Mais quand auriez-vous besoin d’arrondir un nombre ? Une utilisation courante est si vous avez besoin de déterminer le nombre de conteneurs dont vous avez besoin pour quelque chose. Par exemple, supposons que vous ayez un site de musique qui comprend des listes de lecture et que chaque liste de lecture contient dix chansons. Si quelqu’un télécharge 82 chansons, vous devez déterminer le nombre de listes de lecture à créer. Cela se fait en divisant le nombre de chansons par 10 (le nombre de chansons sur chaque liste de lecture):

const songsPerPlaylist = 10;
const numberOfSongs = 82;
const numberOfPlaylists = numberOfSongs/songsPerPlaylist;
<< 8.2

Utilisant Math.round arrondirait ça vers le bas à 8 … mais alors on n’aurait pas de playlist pour les deux dernières chansons ! Dans des cas comme celui-ci, nous devons toujours arrondir en haut afin d’avoir un conteneur supplémentaire pour les éventuels restes :

const numberOfPlaylists = Math.ceil(numberOfSongs/songsPerPlaylist);
<< 9

Arrondir des nombres avec Math.trunc

La prochaine méthode que nous allons examiner est Math.trunc. Ce n’est pas à proprement parler une fonction d’arrondi ; c’est en fait tronque le nombre fourni en argument. En gros, il supprime simplement la partie décimale du nombre, ne laissant que la partie entière, comme on peut le voir dans les exemples ci-dessous :

Math.trunc(2.3) 
<< 2

Math.trunc(2.921) 
<< 2

Math.trunc(2.5) 
<< 2

Math.trunc(PI)
<< 3

Math.trunc(E)
<< 2

A première vue, Math.trunc semble être identique à Math.floor; certainement les exemples donnés jusqu’ici donnent tous les mêmes résultats. Ces deux méthodes se comportent cependant différemment lorsqu’une valeur négative est fournie en argument, comme on peut le voir dans l’exemple ci-dessous :

Math.floor(-2.3) 
<< -3

Math.trunc(-2.3) 
<< -2

La différence se produit parce que, lorsqu’un nombre négatif est arrondi à l’aide de Math.flooril descend jusqu’à l’entier inférieur le plus proche, alors que tronquer une valeur négative équivaut à l’arrondir en haut.

Math.ceil renvoie la même valeur que Math.trunc lorsque l’argument est un nombre négatif :

Math.trunc(-2.3) 
<< -2

Math.ceil(-2.3) 
<< -2

Toutes ces méthodes peuvent être très utiles, mais elles ont la limitation de toujours renvoyer des valeurs entières. Que se passe-t-il si nous voulons arrondir un nombre à un certain nombre de décimales ou de chiffres significatifs ?

Arrondir les nombres aux décimales en JavaScript

On a déjà vu ça Math.round arrondira les nombres à l’entier le plus proche. Malheureusement, le Math object ne fournit aucune méthode pour arrondir les nombres avec plus de précision à un certain nombre de décimales. Heureusement, le Number type a quelques méthodes intégrées qui boîte fais ça. Jetons un coup d’œil à eux.

Arrondir aux décimales avec Number.toFixed

Il s’agit d’une méthode numérique, ce qui signifie qu’elle est appelée par le nombre lui-même. Il arrondit un nombre décimal à un nombre donné de décimales, qui est fourni en argument :

2.4387587.toFixed(2) 
<< "2.44"

Une chose à noter est que la valeur est renvoyée sous la forme d’un chaîne de caractères. Vous pouvez contourner ce problème en enveloppant l’appel de méthode dans le Number fonction, qui va reconvertir le résultat en nombre:

Number(2.4387587.toFixed(2))
<< 2.44

Autre chose à surveiller : si vous essayez d’appliquer cette méthode à un nombre qui est déjà un nombre entier, vous obtiendrez une erreur si vous n’utilisez qu’un seul point pour appeler la méthode :

2.toFixed(2)
<< SyntaxError

Vous ne pouvez pas appeler de méthodes sur des entiers à l’aide d’un seul point, car il n’est pas clair si le point est un opérateur d’appel de méthode ou un point décimal. Pour contourner ce problème, vous pouvez soit placer l’entier entre parenthèses, soit utiliser deux points pour qu’il soit clair que vous appelez une méthode plutôt que d’écrire un nombre littéral avec un point décimal :

(2).toFixed(2)
<< "2.00"

2..toFixed(2)
<< "2.00"

Si aucun argument n’est fourni, le nombre sera arrondi à l’entier le plus proche (mais renvoyé sous forme de chaîne) :

PI.toFixed()
<< "3"

E.toFixed()
<< "3"

Un cas d’utilisation courant pour arrondir à un nombre défini de décimales est lorsqu’il s’agit de devises – par exemple, si vous souhaitez fournir le prix de quelque chose en dollars américains au cent le plus proche. Disons que vous aviez un site de commerce électronique qui proposait une promotion de 15 % sur tout ce qui se trouvait dans le panier. Le prix réduit devra peut-être être arrondi avant d’être affiché :

const item1Price = 2.99
const item2Price = 4.99
const item3Price = 6.20

const totalPrice = item1Price + item2Price + item3Price
const discountedPrice = 0.85 * totalPrice
<< 12.052999999999999

Cela peut facilement être corrigé en utilisant Number.toFixed:

const discountedPrice = (0.85 * totalPrice).toFixed(2)
<< "12.05"

Remarque : pour en savoir plus sur les problèmes auxquels vous pourriez être confronté toFixed()voir Erreurs d’arrondi de Number().toFixed() : cassées mais réparables.

Arrondir les nombres aux décimales avec Number.toPrecision

La Number.toPrecision méthode fonctionne de la même manière que la Number.toFixed méthode, mais il arrondit les nombres à un nombre fixe de chiffres significatifs.

Si vous avez besoin d’un rappel rapide des chiffres significatifs, cela signifie essentiellement de n’utiliser que les premiers chiffres non nuls. Pour les grands nombres, la réponse finale sera également complétée par des zéros. Par exemple, le nombre 53 863 arrondi à deux chiffres significatifs deviendra 54 000. En effet, 5 et 3 sont les deux premiers chiffres non nuls, et il s’arrondit car le chiffre suivant est 8. Nous devons ajouter des zéros à la fin pour nous assurer que la valeur arrondie est une approximation raisonnable du nombre d’origine.

Vous pouvez également arrondir les décimales de la même manière. Par exemple, 0,00000623978 sera arrondi à 0,0000062 à deux chiffres significatifs car 6 et 2 sont les premiers chiffres non nuls et arrondi vers le bas car le chiffre suivant est 3.

Pour utiliser cette méthode, appelez-la simplement sur le nombre, en fournissant le nombre de chiffres significatifs comme argument (rappelez-vous que les entiers doivent être placés entre parenthèses avant d’appeler une méthode sur eux) :

(53863).toPrecision(2)
<< "5.4e+4"

0.00000623978.toPrecision(2)
<< 0.0000062"

Notez que toutes les valeurs sont renvoyées sous forme de chaînes et que la notation exponentielle peut être utilisée, telle que « 5.4e+4 » au lieu de « 54000 ».

Comme précédemment, nous pouvons nous assurer qu’un nombre est renvoyé en enveloppant l’appel de méthode dans le Number fonction:

Number((53863).toPrecision(2))
<< 54000

Une utilisation courante pour arrondir à un nombre donné de chiffres significatifs est lorsque vous avez affaire à de grands nombres et que vous n’êtes pas sûr de leur taille. Par exemple, supposons que vous souhaitiez indiquer combien de fois votre dernier message a été « aimé », arrondissez-vous au 10, 100 ou 1000 le plus proche ? D’une certaine manière, cela dépend de sa popularité ; vous ne voulez pas l’arrondir au 100 le plus proche s’il n’obtient que 8 likes, mais s’il obtient des milliers de likes, il semble idiot de l’arrondir au 10 le plus proche. La solution est de l’arrondir à un chiffre significatif :

const unpopularPost = 8;
const quitePopularPost = 387;
const poplularPost = 79671;

Number(unpopularPost.toPrecision(1))
<< 8
Number(quitePopularPost.toPrecision(1))
<< 400
Number(poplularPost.toPrecision(1))
<< Number(poplularPost.toPrecision(1))
<< 80000

Problèmes avec les nombres arrondis en JavaScript

Il y a quelques points à surveiller lors de l’arrondi des nombres en JavaScript (ou dans n’importe quel langage de programmation, d’ailleurs). Comme vous le savez probablement, les ordinateurs stockent toutes les données, y compris les nombres, sous forme de représentation binaire. JavaScript stocke les nombres comme Simple précision 32 bits valeurs binaires.

Le problème avec cela est que certains nombres en base 10 ne peut pas être représenté avec précision dans base-2. Cela ne pose généralement aucun problème, mais cela provoque des résultats étranges tels que celui-ci :

0.1 + 0.2 === 0.3
<< false

C’est parce que 0,1 et 0,2 ne peuvent pas être représentés exactement en binaire, et une légère erreur est commise lors de leur addition.

La Math objet a une autre méthode appelée fround, qui renvoie le nombre le plus proche pouvant être représenté à l’aide de 32 bits. Par exemple, 0,6125 peut être représenté exactement en binaire par 0,101, donc cela renverra la même valeur :

Math.fround(0.625)
<< 0.625

Mais, comme nous l’avons vu plus haut, 0.1 ne peut pas être représenté exactement en 32 bits. Math.fround nous montre le nombre le plus proche qui peut être représenté :

Math.fround(0.1)
<< 0.10000000149011612

Comme vous pouvez le voir, il est très proche de 0,1, mais très légèrement supérieur. Dans la plupart des cas pratiques, cela ne posera aucun problème, mais cela peut parfois provoquer un comportement étrange lorsque vous essayez d’arrondir certains nombres :

3.55.toFixed(1) 
<< "3.5"

Cela se produit parce que la décimale 3,55 ne peut pas être représentée avec précision en utilisant 32 bits. On peut utiliser Math.fround pour voir comment c’est réellement représenté:

Math.fround(3.55)
<< 3.549999952316284

Comme vous pouvez le voir, il est en fait représenté par le nombre à virgule flottante 3.549999952316284, qui arrondit vers le bas à 3,5.

Ces problèmes d’arrondi des nombres en JavaScript ne se produisent pas trop souvent, mais vous devez certainement en être conscient si vous faites beaucoup d’arrondis, en particulier lorsqu’il est important que le résultat soit précis.

Quelles méthodes dois-je utiliser pour arrondir les nombres ?

Avec toutes les méthodes d’arrondi présentées dans ce tour d’horizon, vous vous demandez peut-être quelle est la meilleure à utiliser. Comme toujours, la réponse est « ça dépend ».

Si vous voulez simplement arrondir un nombre à l’entier le plus prochevous ne pouvez pas vous tromper avec Math.roundmais vous devriez également envisager d’utiliser Math.floor ou Math.ceil si vous voulez toujours arrondir vers le bas ou vers le haut, quelle que soit la partie décimale. Et pensez à utiliser Math.trunc à la place si vous prévoyez également d’arrondir les nombres négatifs.

Si vous avez besoin arrondir à un nombre donné de décimales ou de chiffres significatifsvous devrez utiliser Number.toFixed ou Number.toPrecision. Mais sachez que ces deux méthodes sont appelées par le nombre et retourner une chaîne.

Vous pouvez voir un exemple de tous les différents types d’arrondi couverts dans cet article dans la démonstration CodePen suivante.

Voir le stylo
Arrondi SitePoint par SitePoint (@SitePoint)
sur CodePen.

Avec toutes ces différentes méthodes disponibles, vous ne devriez plus avoir de problème pour arrondir les nombres à partir de maintenant.

Si vous avez trouvé cet article utile, vous aimerez peut-être aussi ceux-ci :