L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Préparation à ECMAScript 6: nouvelles méthodes numériques
Cet article traite des méthodes de nombres nouvelles et améliorées dans ES6 (ECMAScript 6).
Il fait partie d'une série sur les nouvelles fonctionnalités de ES6, dans laquelle nous avons également discuté des nouvelles méthodes disponibles pour la String et Array types de données, mais aussi de nouveaux types de données comme Map et WeakMap .
Je vais vous présenter les nouvelles méthodes et constantes ajoutées au Numéro type de données. Comme nous le verrons, certaines méthodes numériques ne sont pas nouvelles du tout, mais elles ont été améliorées et / ou déplacées sous le bon objet (par exemple, isNaN () ). Comme toujours, nous mettrons en pratique les nouvelles connaissances acquises avec quelques exemples. Alors, sans plus tarder, commençons.
Number.isInteger ()
La première méthode que je veux couvrir est Number.isInteger () . C'est un nouvel ajout à JavaScript, et c'est quelque chose que vous avez peut-être défini et utilisé par vous-même dans le passé. Il détermine si la valeur transmise à la fonction est un nombre entier ou non. Cette méthode renvoie true si la valeur transmise est un nombre entier et false sinon. La mise en œuvre de cette méthode a été assez facile, mais il est toujours bon de l'avoir nativement. Une des solutions possibles pour recréer cette fonction est:
Number.isInteger = Number.isInteger || function (nombre) {
return typeof numéro === 'numéro' && numéro% 1 === 0;
}
Juste pour m'amuser, j'ai essayé de recréer cette fonction et j'ai fini avec une approche différente:
Number.isInteger = Number.isInteger || function (nombre) {
return typeof numéro === 'numéro' && Math.floor (numéro) === nombre;
}
Ces deux fonctions sont bonnes et utiles mais ne respectent pas les spécifications ECMAScript 6. Donc, si vous voulez polyfiler cette méthode, vous avez besoin de quelque chose d'un peu plus complexe, comme nous le verrons bientôt. Commençons par découvrir la syntaxe de Number.isInteger () :
Number.isInteger (number)
L'argument numéro représente la valeur que vous voulez tester
Voici quelques exemples d'utilisation de cette méthode:
// affiche 'true'
console.log (Number.isInteger (19));
// imprime 'faux'
console.log (Number.isInteger (3.5));
// imprime 'faux'
console.log (Number.isInteger ([1, 2, 3])));
Une démo en direct du code précédent est montrée ci-dessous et est également disponible chez JSBin .
La méthode est supportée dans Node et tout moderne navigateurs, à l'exception d'Internet Explorer. Si vous avez besoin de prendre en charge les anciens navigateurs, vous pouvez utiliser un polyfill, tel que celui disponible sur Mozilla Developer Network sur la page des méthodes . Ceci est également reproduit ci-dessous pour votre commodité:
if (! Number.isInteger) {
Number.isInteger = function isInteger (nVal) {
return typeof nVal === 'numéro' &&
isFinite (nVal) &&
nVal> -9007199254740992 &&
nVal <9007199254740992 &&
Math.floor (nVal) === nVal;
}
}
Number.isNaN ()
Si vous avez écrit du code JavaScript dans le passé, cette méthode ne devrait pas être nouvelle pour vous. Depuis quelques temps, JavaScript utilise une méthode appelée isNaN () qui est exposée via l'objet window . Cette méthode teste si une valeur est égale à NaN auquel cas elle renvoie true ou sinon false . Le problème avec window.isNaN () est qu'il a un problème en ce qu'il renvoie également true pour des valeurs que converti en nombre sera NaN . Pour vous donner une idée concrète de ce problème, toutes les instructions suivantes retournent true :
// imprime 'true'
console.log (window.isNaN (0/0));
// imprime 'vrai'
console.log (window.isNaN ('test'));
// imprime 'vrai'
console.log (window.isNaN (indéfini));
// imprime 'vrai'
console.log (window.isNaN ({prop: 'valeur'}));
Vous pouvez avoir besoin d'une méthode qui renvoie true uniquement si la valeur NaN est transmise. C'est pourquoi ECMAScript 6 a introduit la méthode Number.isNaN () . Sa syntaxe est à peu près ce que vous attendez:
Number.isNaN (value)
Ici, valeur est la valeur que vous voulez tester. Voici quelques exemples d'utilisation de cette méthode:
// affiche 'true'
console.log (Number.isNaN (0/0));
// imprime 'vrai'
console.log (Number.isNaN (NaN));
// imprime 'faux'
console.log (Number.isNaN (non défini));
// imprime 'faux'
console.log (Number.isNaN ({prop: 'value'}));
Comme vous pouvez le constater, en testant les mêmes valeurs, nous obtenons des résultats différents.
Une démo en direct de l'extrait précédent est montrée ci-dessous et est également disponible chez JSBin
ES6 Nouvelles méthodes numériques sur jsbin.com
La méthode est supportée par Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous voulez supporter d'autres navigateurs, un polyfill très simple pour cette méthode est le suivant:
Number.isNaN = Number.isNaN || function (valeur) {
valeur de retour! == valeur;
}
La raison en est que NaN est la seule valeur non-réflexive de JavaScript, ce qui signifie que c'est la seule valeur qui ne soit pas égale à elle-même.
Number.isFinite () [19659005] Cette méthode partage la même histoire que la précédente. En JavaScript il y a une méthode appelée window.isFinite () qui teste si une valeur passée est un nombre fini ou non. Malheureusement, il renvoie également true pour les valeurs que converti en nombre sera un nombre fini. Des exemples de ce problème sont présentés ci-dessous: // imprime 'vrai'
console.log (window.isFinite (10));
// imprime 'vrai'
console.log (window.isFinite (Number.MAX_VALUE));
// imprime 'vrai'
console.log (window.isFinite (null));
// imprime 'vrai'
console.log (window.isFinite ([]));
// imprime 'vrai'
console.log (window.isFinite (10));
// imprime 'vrai'
console.log (window.isFinite (Number.MAX_VALUE));
// imprime 'vrai'
console.log (window.isFinite (null));
// imprime 'vrai'
console.log (window.isFinite ([]));
Pour cette raison, dans ECMAScript 6 il y a une méthode appelée isFinite () qui appartient à Number . Sa syntaxe est la suivante:
Number.isFinite (value)
Ici, valeur est la valeur que vous voulez tester. Si vous testez les mêmes valeurs à partir de l'extrait précédent, vous pouvez voir que les résultats sont différents:
// imprime 'true'
console.log (Number.isFinite (10));
// imprime 'vrai'
console.log (Number.isFinite (Number.MAX_VALUE));
// imprime 'faux'
console.log (Number.isFinite (null));
// imprime 'faux'
console.log (Number.isFinite ([]));
Une démo en direct de l'extrait précédent est montrée ci-dessous et est également disponible chez JSBin .
ES6 Nouvelles méthodes de nombre sur jsbin.com
La méthode est supportée dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Vous pouvez trouver un polyfill pour cela sur la page de la méthode sur MDN .
Number.isSafeInteger ()
La méthode Number.isSafeInteger () est un ajout complètement nouveau à ES6. Il teste si la valeur transmise est un nombre qui est un entier sûr, auquel cas elle renvoie true . Un nombre entier sûr est défini comme un entier qui satisfait les deux conditions suivantes:
- le nombre peut être exactement représenté comme un nombre double précision IEEE-754
- la représentation IEEE-754 du nombre ne peut pas être le résultat d'arrondir tout autre entier pour correspondre à la représentation IEEE-754.
Sur la base de cette définition, les entiers sûrs sont tous les entiers de – (2 53 – 1) inclusif à 2 53 – 1 inclus. Ces valeurs sont importantes et nous en parlerons un peu plus à la fin de cette section.
La syntaxe de cette méthode est:
Number.isSafeInteger (value)
Ici, valeur est la valeur que vous voulez tester. Voici quelques exemples d'utilisation de cette méthode:
// affiche 'true'
console.log (Number.isSafeInteger (5));
// imprime 'faux'
console.log (Number.isSafeInteger ('19 '));
// imprime 'faux'
console.log (Number.isSafeInteger (Math.pow (2, 53)));
// imprime 'vrai'
console.log (Number.isSafeInteger (Math.pow (2, 53) - 1));
Une démo en direct de ce code est montrée ci-dessous et également disponible chez JSBin .
ES6 Nouvelles méthodes de nombre sur jsbin.com
Le numéro . isSafeInteger () est pris en charge dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Un polyfill pour cette méthode, extrait de es6-shim par Paul Miller est:
Number.isSafeInteger = Number.isSafeInteger || function (valeur) {
return Number.isInteger (valeur) && Math.abs (valeur) <= Number.MAX_SAFE_INTEGER;
}
Notez que ce polyfill repose sur la méthode Number.isInteger () dont il a été question précédemment, donc vous devez également utiliser ce dernier pour utiliser celui-ci.
ECMAScript 6 a également introduit deux valeurs constantes associées : Number.MAX_SAFE_INTEGER et Number.MIN_SAFE_INTEGER . Le premier représente l'entier maximum sûr en JavaScript – c'est-à-dire 2 53 – 1 – tandis que le second est l'entier minimum sécurisé, qui est – (2 53 – 1). Comme vous pouvez le remarquer, ce sont les mêmes valeurs que celles que j'ai citées plus haut.
Number.parseInt () et Number.parseFloat ()
Les Number.parseInt () et Number.parseFloat () méthodes sont couvertes dans la même section car, contrairement aux autres méthodes similaires mentionnées dans cet article, elles existaient déjà dans une version précédente d'ECMAScript, mais ne sont pas différentes de leur ancienne version globale. Ainsi, vous pouvez les utiliser de la même manière que vous l'avez fait jusqu'à présent et vous pouvez vous attendre aux mêmes résultats. Le but de l'ajout de ces méthodes à Number est la modularisation des globals.
Par souci d'exhaustivité, je rapporte leur syntaxe:
// Signature de Number.parseInt
Number.parseInt (chaîne, base de données)
// Signature de Number.parseFloat
Number.parseFloat (chaîne)
Ici, chaîne de caractères représente la valeur que vous voulez analyser et radix est la base que vous voulez utiliser pour convertir chaîne de caractères .
montre quelques exemples d'utilisations:
// Imprime '-3'
console.log (Number.parseInt ('- 3'));
// Imprime '4'
console.log (Number.parseInt ('100', 2));
// Imprime 'NaN'
console.log (Number.parseInt ('test'));
// Imprime 'NaN'
console.log (Number.parseInt ({}));
// Imprime '42 .1 '
console.log (Number.parseFloat ('42 .1 '));
// Imprime 'NaN'
console.log (Number.parseFloat ('test'));
// Imprime 'NaN'
console.log (Number.parseFloat ({}));
Une démo en direct de ce code est affichée ci-dessous et est également disponible à JSBin .
ES6 Nouvelles méthodes numériques sur jsbin.com
Ces méthodes sont prises en charge dans Noeud et tous les navigateurs modernes, à l'exception d'Internet Explorer. Dans le cas où vous souhaitez les polyfiler, vous pouvez simplement appeler leur méthode globale associée comme indiqué ci-dessous:
// Polyfill Number.parseInt
Number.parseInt = Number.parseInt || fonction () {
return window.parseInt.apply (fenêtre, arguments);
}
// Polyfill Number.parseFloat
Number.parseFloat = Number.parseFloat || fonction () {
return window.parseFloat.apply (fenêtre, arguments);
}
Support du navigateur
Le graphique suivant illustre le support du navigateur pour les extensions de l'objet Number intégré dans ES6. Passez la souris au-dessus des cases pour voir le pourcentage d'utilisation des versions respectives du navigateur.
Méthodes du nombre ES6: Wrapping Up
Dans ce tutoriel, nous avons couvert les nouvelles méthodes et constantes ajoutées dans ECMAScript 6 qui fonctionnent avec le type de données Number . Il est à noter que ES6 a également ajouté une autre constante que je n'ai pas mentionnée jusqu'à présent. C'est Number.EPSILON et représente la différence entre une et la plus petite valeur supérieure à celle qui peut être représentée comme un
Nombre . Avec cette dernière note, nous avons terminé notre parcours pour le type de données Number .
Je suis développeur web et développeur d'applications (full-stack) avec plus de 5 ans d'expérience sur le web en utilisant HTML, CSS, Sass, JavaScript et PHP. Je suis un expert des API JavaScript et HTML5, mais je m'intéresse à la sécurité Web, à l'accessibilité, à la performance et au référencement. Je suis aussi un écrivain régulier pour plusieurs réseaux, conférencier et auteur des livres jQuery in Action, troisième édition et Instant jQuery Selectors .
Source link
Source link