Maison > interface Web > js tutoriel > Un guide pour arrondir les numéros en JavaScript

Un guide pour arrondir les numéros en JavaScript

Joseph Gordon-Levitt
Libérer: 2025-02-09 11:32:10
original
577 Les gens l'ont consulté

A Guide to Rounding Numbers in JavaScript

Cet article explore diverses méthodes d'arrondi en JavaScript, notamment en utilisant des fonctions mathématiques JavaScript et d'autres méthodes d'arrondi à décimales. Nous présenterons également des problèmes qui doivent être prêts à prêter attention lors de l'arrondissement des numéros.

points clés

  • JavaScript fournit plusieurs façons d'arrondir les nombres, y compris Math.round, Math.floor, Math.ceil et Math.trunc. Math.round Rond à l'entier le plus proche, Math.floor Rond vers le bas, Math.ceil Arrondage, Math.trunc tronquer la partie fractionnée du nombre.
  • JavaScript fournit des méthodes Number.toFixed et Number.toPrecision pour arrondir les nombres à des décimales spécifiques ou à des nombres significatifs. Ces méthodes renvoient le numéro arrondi sous forme de chaîne.
  • En traitant des nombres négatifs, les comportements de Math.round, Math.floor, Math.ceil et Math.trunc diffèrent. Par exemple, Math.floor arrondit le nombre négatif jusqu'à la plus petite entière suivante, tandis que Math.trunc tronque la partie fractionnée, en le faisant efficacement vers le haut.
  • En raison de la représentation binaire des nombres, des problèmes de précision peuvent se produire en JavaScript. Certains nombres décimaux ne peuvent pas être représentés avec précision en binaire, entraînant des erreurs d'arrondi. La méthode Math.fround peut être utilisée pour trouver le nombre représentable le plus proche de 32 bits.
  • La sélection de la méthode d'arrondi dépend du cas d'utilisation spécifique. Math.round est un bon choix général pour arrondir à l'entier le plus proche, mais Math.floor, Math.ceil ou Math.trunc peut être mieux adapté à toujours arrondi ou vers le haut, ou pour faire face à des nombres négatifs. Number.toFixed ou Number.toPrecision s'applique à l'arrondi à une décimale spécifique ou à un nombre significatif.

JavaScript Rounding

Lors du traitement des valeurs numériques, nous effectuons parfois des calculs qui finissent par produire des parties fractionnées qui doivent être arrondies aux entiers - par exemple, lorsque vous calculez le prix moyen ou le traitement des nombres aléatoires. Heureusement, l'objet Math de JavaScript fournit de nombreuses façons d'arronter les nombres aux valeurs entières.

Dans notre exemple, nous démontrerons différents types d'arrondi en utilisant deux constantes mathématiques les plus importantes: π (le rapport du périmètre d'un cercle à son diamètre) et E (la base du logarithme naturel, également connu sous le nom de "numéro d'Euler "). Les deux valeurs sont des propriétés des objets Math, mais attribuez-les à certaines variables pour le rendre plus facile à gérer:

const PI = Math.PI;
const E = Math.E;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

CONSEIL Pro: Vous pouvez également utiliser la destruction d'objets pour faire cette affectation dans une ligne:

const { PI, E } = Math;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Maintenant que nous avons défini ces constantes, jetons un coup d'œil à certaines méthodes pour les numéros d'arrondi en JavaScript.

Nombres ronds en javascript en utilisant Math.round

La première méthode que nous allons examiner est

. C'est le choix le plus simple, il arrondis n'importe quel nombre avec une partie fractionnaire de l'entier le plus proche. Il utilise la règle suivante: si un nombre se situe exactement entre deux entiers, arrondissez-le. Par exemple, 2,5 s'affrontera jusqu'à 3. Math.round

Pour utiliser cette méthode, nous devons simplement fournir le numéro à arrondir comme paramètre:

const PI = Math.PI;
const E = Math.E;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Si vous souhaitez arrondir le nombre à la valeur entière la plus proche,

est très pratique. Par exemple, si vous calculez le score moyen de trois tests, ajoutez les trois scores et divisez-les par trois. Cela peut ne pas obtenir un entier, vous pouvez donc le contourner à la valeur la plus proche en utilisant Math.round(): Math.round()

const { PI, E } = Math;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Nombres d'arrondi en utilisant

Math.floor

La prochaine méthode que nous allons afficher est

. Cela arrête toujours la valeur vers l'entier ci-dessous (le nom signifie que le nombre est poussé vers le bas vers le "plancher"): Math.floor

Une utilisation commune de
Math.round(2.3); // 因为更接近2,所以向下舍入

Math.round(2.921); // 因为更接近3,所以向上舍入

Math.round(2.5); // 因为正好位于中间,所以向上舍入

Math.round(PI);

Math.round(E);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

consiste à créer des entiers aléatoires. Arrondir garantit que l'entier commence à partir de zéro et que chaque entier a la même chance d'être retourné. À partir de zéro est souvent utile car les tableaux en JavaScript sont indexés zéro, donc l'arrêt garantira que le premier élément du tableau peut être sélectionné. L'exemple suivant montre comment sélectionner un élément aléatoire dans un tableau à l'aide de Math.floor: Math.floor

const test1 = 86;
const test2 = 93;
const test3 = 95;
const average = Math.round((test1 + test2 + test3) / 3);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Le code ci-dessus utilise

arrondir pour garantir qu'un index entre 0 et 4 est renvoyé, donc chaque élément du tableau a la même chance d'être sélectionné. Math.floor

Nombres d'arrondi en utilisant

Math.ceil

En parlant d'arrondir vers le haut, c'est exactement ce que

fait. Ce nom vient du "plafond", qui, contrairement au "revêtement de sol", signifie que la valeur augmente. Cette méthode fonctionne de la même manière que toutes les autres méthodes. Fournissez simplement le numéro que vous souhaitez rassembler comme paramètre: Math.ceil

Math.floor(2.3); // 向下舍入到2

Math.floor(2.921); // 向下舍入到2

Math.floor(2.5); // 向下舍入到2

Math.floor(PI);

Math.floor(E);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Mais quand avez-vous besoin de rassembler un numéro? Une utilisation courante est si vous avez besoin de calculer le nombre de conteneurs dont vous avez besoin pour contenir quelque chose. Par exemple, supposons que vous ayez un site Web de musique qui contient des listes de lecture, chaque liste de lecture contient dix chansons. Si quelqu'un télécharge 82 chansons, vous devez comprendre le nombre de listes de lecture que vous souhaitez créer. Cela se fait en divisant le nombre de chansons par 10 (le nombre de chansons dans chaque liste de lecture):

const fruit = ["?", "?", "?", "?", "?"];

const randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
Copier après la connexion
Copier après la connexion
en utilisant

va le contourner à 8 ... Cependant, nous ne créerons pas de playlist pour les deux dernières chansons! Dans ce cas, nous devons toujours nous rassembler afin que nous puissions fournir un conteneur supplémentaire pour tout reste: Math.round

Math.ceil(2.3); // 向上舍入到3

Math.ceil(2.921); // 向上舍入到3

Math.ceil(2.5); // 向上舍入到3

Math.ceil(PI);

Math.ceil(E);
Copier après la connexion
Copier après la connexion
Nombres d'arrondi en utilisant

Math.trunc

La prochaine méthode que nous allons afficher est

. À strictement, ce n'est pas une fonction d'arrondi; il tronque en fait les nombres de paramètres fournis. Il supprime simplement la partie décimale du nombre, ne laissant que la partie entière, comme indiqué dans l'exemple suivant: Math.trunc

const PI = Math.PI;
const E = Math.E;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

À première vue, Math.trunc semble être le même que Math.floor; bien sûr, tous les exemples donnés jusqu'à présent donnent les mêmes résultats. Cependant, lorsqu'une valeur négative est fournie comme un paramètre, les deux méthodes se comportent différemment, comme le montre l'exemple suivant:

const { PI, E } = Math;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
La différence se produit parce que lorsque vous utilisez

pour arronter le nombre négatif, il s'arrête au plus petit entier suivant, et tronquer une valeur négative équivaut à l'arrondir vers le haut. Math.floor

Lorsque le paramètre est négatif,

renvoie la même valeur que Math.ceil: Math.trunc

Math.round(2.3); // 因为更接近2,所以向下舍入

Math.round(2.921); // 因为更接近3,所以向上舍入

Math.round(2.5); // 因为正好位于中间,所以向上舍入

Math.round(PI);

Math.round(E);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Toutes ces méthodes sont très utiles, mais elles ont une limitation qu'elles renvoient toujours les valeurs entières. Et si nous voulons arrondir les nombres à un chiffre décimal spécifique ou un nombre important?

Nombres ronds aux décimales dans JavaScript

Nous avons vu que

allacera le numéro à l'entier le plus proche. Malheureusement, l'objet Math.round ne fournit aucun moyen de rond les nombres à une décimale spécifique avec une précision plus précise. Heureusement, le type Math a des moyens intégrés pour ce faire. Jetons un œil à-les. Number

Rond à décimal en utilisant

Number.toFixed

Il s'agit d'une méthode numérique, ce qui signifie qu'il est appelé par le nombre lui-même. Il arrond le nombre décimal au nombre décimal donné, qui est fourni sous forme de paramètre:

Une chose à noter est que cette valeur est renvoyée en tant que
const test1 = 86;
const test2 = 93;
const test3 = 95;
const average = Math.round((test1 + test2 + test3) / 3);
Copier après la connexion
Copier après la connexion
Copier après la connexion
String

. Vous pouvez résoudre ce problème en enveloppe l'appel de méthode dans une fonction , qui convertit le résultat en nombre: Number

Remarque également: si vous essayez d'appliquer cette méthode à un nombre déjà un entier, vous obtiendrez une erreur si vous appelez la méthode en utilisant uniquement un seul point:
Math.floor(2.3); // 向下舍入到2

Math.floor(2.921); // 向下舍入到2

Math.floor(2.5); // 向下舍入到2

Math.floor(PI);

Math.floor(E);
Copier après la connexion
Copier après la connexion
Copier après la connexion

Vous ne pouvez pas appeler des méthodes sur des entiers en utilisant 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 résoudre ce problème, vous pouvez mettre des entiers entre parenthèses ou utiliser deux points pour indiquer clairement que vous appelez une méthode au lieu d'écrire un littéral numérique avec un point décimal:
const fruit = ["?", "?", "?", "?", "?"];

const randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
Copier après la connexion
Copier après la connexion

Si aucun argument n'est fourni, le numéro sera arrondi à l'entier le plus proche (mais renvoyé en tant que chaîne):
Math.ceil(2.3); // 向上舍入到3

Math.ceil(2.921); // 向上舍入到3

Math.ceil(2.5); // 向上舍入到3

Math.ceil(PI);

Math.ceil(E);
Copier après la connexion
Copier après la connexion

Un cas d'utilisation commun pour l'arrondi à quelques décimales définies concerne la devise, par exemple, si vous souhaitez offrir le prix de quelque chose dans le dollar le plus proche de cents. Supposons que vous ayez un site Web de commerce électronique avec une promotion en cours et que vous pouvez obtenir une remise de 15% sur n'importe quel article de votre panier. Avant d'afficher le prix réduit, il peut être nécessaire de le contourner:
const songsPerPlaylist = 10;
const numberOfSongs = 82;
const numberOfPlaylists = numberOfSongs / songsPerPlaylist;
Copier après la connexion

Cela peut être facilement corrigé en utilisant
const numberOfPlaylists = Math.ceil(numberOfSongs / songsPerPlaylist);
Copier après la connexion
:

Number.toFixed

Math.trunc(2.3); // 只留下2

Math.trunc(2.921); // 只留下2,即使它更接近3

Math.trunc(2.5); // 只留下2

Math.trunc(PI);

Math.trunc(E);
Copier après la connexion
Remarque: Pour plus d'informations sur les problèmes

que vous pouvez avoir, voir Number (). Tofixed () Erreur d'arrondi: corrompu mais réparable. toFixed()

Rond à décimal en utilisant Number.toPrecision

La méthode

Number.toPrecision fonctionne de manière similaire à la méthode Number.toFixed, mais elle arrond les nombres à un nombre fixe de nombres significatifs.

Si vous avez besoin d'un rappel rapide d'un nombre valide, cela signifie essentiellement en utilisant le premier numéro non nul. Pour un grand nombre, la réponse finale sera également remplie de zéros. Par exemple, le nombre 53 863 arrondi à deux chiffres significatifs deviendra 54 000. En effet, 5 et 3 sont les deux premiers nombres non nuls, et comme le numéro suivant est de 8, il tourne vers le haut. Nous devons ajouter des zéros à la fin pour nous assurer que la valeur arrondie est une approximation raisonnable du numéro d'origine.

Vous pouvez arrondir des décimales de la même manière. Par exemple, 0,00000623978 s'arrêtera à 0,0000062 à deux chiffres significatifs, car 6 et 2 sont les deux premiers nombres non nuls, et comme le chiffre suivant est 3, il s'arrête en baisse.

Pour utiliser cette méthode, appelez-la simplement sur le numéro et fournissez le nombre de nombres significatifs comme arguments (rappelez-vous, les entiers doivent être placés entre parenthèses avant de les appeler):

const PI = Math.PI;
const E = Math.E;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Notez que toutes les valeurs sont renvoyées sous forme de chaînes et peuvent être utilisées avec une notation exponentielle - par exemple "5.4e 4" au lieu de "54000".

Comme mentionné précédemment, nous pouvons nous assurer qu'un nombre est renvoyé en enveloppe l'appel de la méthode dans la fonction Number:

const { PI, E } = Math;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Une utilisation courante de l'arrondi à un nombre significatif donné est lorsque vous travaillez avec un grand nombre et que vous ne savez pas leur taille. Par exemple, supposons que vous souhaitiez signaler le nombre de fois que le dernier message a été "aimé", l'avez-vous tourné vers les 10, 100 ou 1000 les plus proches? Dans une certaine mesure, cela dépend de sa popularité; si elle n'obtient que 8 likes, vous ne voulez pas le contourner aux 100 plus proches, mais s'il obtient des milliers de likes, le tournant aux 10 les plus proches semble stupide. La solution consiste à l'arrondir à un nombre significatif:

Math.round(2.3); // 因为更接近2,所以向下舍入

Math.round(2.921); // 因为更接近3,所以向上舍入

Math.round(2.5); // 因为正好位于中间,所以向上舍入

Math.round(PI);

Math.round(E);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Problèmes d'arrondi nombres en javascript

Il y a certaines choses à noter lors de l'arrondi des nombres en JavaScript (ou tout langage de programmation). Comme vous le savez peut-être, un ordinateur stocke toutes les données (y compris les nombres) en tant que représentation binaire. JavaScript stocke les nombres comme des valeurs binaires à une seule précision 32 bits.

L'un des problèmes de procédure est que certains nombres décimaux ne peuvent pas être représentés avec précision en binaire. Cela ne cause généralement aucun problème, mais cela entraîne des résultats étranges, tels que:

const test1 = 86;
const test2 = 93;
const test3 = 95;
const average = Math.round((test1 + test2 + test3) / 3);
Copier après la connexion
Copier après la connexion
Copier après la connexion

En effet, 0,1 et 0,2 ne peuvent pas être représentés avec précision dans le binaire et produire de légères erreurs lors de les ajouter ensemble.

L'objet

Math a une autre méthode appelée fround qui renvoie le nombre le plus proche qui peut être représenté à l'aide de 32 bits. Par exemple, 0,6125 peut être exprimé précisément en tant que binaire 0.101, donc cela renverra la même valeur:

Math.floor(2.3); // 向下舍入到2

Math.floor(2.921); // 向下舍入到2

Math.floor(2.5); // 向下舍入到2

Math.floor(PI);

Math.floor(E);
Copier après la connexion
Copier après la connexion
Copier après la connexion

Cependant, comme nous l'avons vu ci-dessus, 0,1 ne peut pas être exprimé avec précision en 32 bits. Math.fround nous montre le nombre le plus proche qui peut être représenté:

const PI = Math.PI;
const E = Math.E;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Comme vous pouvez le voir, il est très proche de 0,1, mais est très légèrement plus élevé. Dans la plupart des cas pratiques, cela ne cause aucun problème, mais cela provoque parfois un comportement étrange lorsque vous essayez de compléter certains nombres:

const { PI, E } = Math;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Cela se produit car Decimal 3.55 ne peut pas utiliser une représentation précise 32 bits. Nous pouvons utiliser Math.fround pour voir comment il le représente réellement:

Math.round(2.3); // 因为更接近2,所以向下舍入

Math.round(2.921); // 因为更接近3,所以向上舍入

Math.round(2.5); // 因为正好位于中间,所以向上舍入

Math.round(PI);

Math.round(E);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Comme vous pouvez le voir, il est en fait représenté par le numéro de point flottant 3.549999952316284, qui roule à 3,5.

Ces problèmes avec les numéros d'arrondi en JavaScript ne se produisent pas souvent, mais vous devriez certainement prêter attention à ces problèmes si vous faites beaucoup d'arrondi, surtout si les résultats doivent être exacts.

Quelles méthodes dois-je utiliser pour les numéros d'arrondi?

Avec toutes les méthodes d'arrondi décrites dans cet article, vous pouvez vous demander quelle méthode est la meilleure. La réponse est toujours "cela dépend".

Si vous voulez simplement arrondir les nombres à l'entier le plus proche, vous ne vous tromperez pas avec Math.round, mais si vous voulez toujours vous arrondir ou vers le haut, quelle que soit la partie fractionnaire, vous devriez également envisager d'utiliser Math.floor ou Math.ceil. Si vous prévoyez également de rallumer des nombres négatifs, envisagez d'utiliser à la place Math.trunc.

Si vous avez besoin de vous arrondir à un nombre décimal ou significatif, vous devez utiliser Number.toFixed ou Number.toPrecision. Mais veuillez noter que les deux méthodes sont appelées par les nombres et renvoient une chaîne.

Vous pouvez voir tous les différents types d'exemples d'arrondi décrits dans cet article dans la démonstration de codepen ci-dessous.

lien de démonstration de codepen

Avec toutes ces différentes méthodes, vous ne devriez avoir aucun problème avec les numéros d'arrondi à l'avenir.

Si vous trouvez cet article utile, vous pourriez également les aimer:

  • JavaScript Digital Intéressant News
  • Conseils rapides: comment convertir les nombres en nombres ordinaux en javascript

FAQ sur les nombres d'arrondi dans JavaScript

Comment arrondir les nombres aux entiers les plus proches en JavaScript? Vous pouvez utiliser la fonction Math.round() pour arronner le numéro à l'entier le plus proche. Par exemple, Math.round(3.14) obtiendra 3 et Math.round(4.76) en obtiendra 5.

Quelle est la différence entre

Math.round(), Math.floor() et Math.ceil()? Math.round() Rond à l'entier le plus proche, Math.floor() Rond jusqu'à l'entier le plus proche, Math.ceil() Arrondissez jusqu'à l'entier le plus proche.

Puis-je arrondir les nombres à un numéro décimal spécifique? Oui, vous pouvez arrondir les nombres à des décimales spécifiques en utilisant la méthode toFixed(). Par exemple, let roundedNumber = 3.14159.toFixed(2) obtiendra 3.14.

Math.round() Comment gérer les numéros avec .5 Parties décimales? Math.round() Utiliser la logique "d'arrondissement", ce qui signifie que lorsque la partie fractionnaire est exactement 0,5, elle tourne à l'entier même le plus proche. Par exemple, le résultat de Math.round(2.5) est 2 et le résultat de Math.round(3.5) est 4.

Puis-je utiliser Math.round() pour arrondir des nombres positifs et négatifs? Oui, Math.round() fonctionne avec des nombres positifs et négatifs. Il tourne les nombres positifs comme d'habitude et tourne les nombres négatifs à zéro.

Une erreur d'arrondi se produit-elle en JavaScript? Oui, des erreurs d'arrondi peuvent se produire en raison de la façon dont les opérations de points flottants fonctionnent dans votre ordinateur. Il est important de prêter attention aux problèmes de précision potentiels, en particulier lorsqu'ils traitent avec des nombres très grands ou très petits. Dans ce cas, envisagez d'utiliser une bibliothèque comme Decimal.js pour des opérations arithmétiques plus précises.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal