Différence entre toFixed () et toPrecision ()?

Je suis nouveau dans JavaScript et je viens de découvrir toFixed()ettoPrecision() d'arrondir les nombres. Cependant, je ne peux pas comprendre quelle est la différence entre les deux.

Quelle est la différence entre number.toFixed()et number.toPrecision()?

toFixed(n)fournit la nlongueur après la virgule décimale; toPrecision(x)fournit xla longueur totale.

Réf à w3schools: toFixed et toPrecision

EDIT :
J'ai appris il y a quelque temps que w3schools n'est pas exactement la meilleure source, mais j'ai oublié cette réponse jusqu'à ce que je voie le commentaire de kzh, euh, "enthousiaste". Voici des références supplémentaires de Mozilla Doc Center pourtoFixed() et pourtoPrecision() . Heureusement pour nous tous, MDC et w3schools sont d'accord dans ce cas.

Par souci d'exhaustivité, je dois mentionner que cela toFixed()équivaut à toFixed(0)et toPrecision()renvoie simplement le nombre d'origine sans mise en forme.

Je crois que le premier vous donne un nombre fixe de décimales, tandis que le second vous donne un nombre fixe de chiffres significatifs.

Math.PI.toFixed(2); // "3.14"
Math.PI.toPrecision(2); // "3.1"

De plus, toPrecisionproduira une notation scientifique s'il y a plus de chiffres entiers dans le nombre que la précision spécifiée.

(Math.PI * 10).toPrecision(2); // "31"
(Math.PI * 100).toPrecision(2); // "3.1e+2"

EDIT: Oh, et si vous êtes nouveau dans JavaScript, je peux fortement recommander le livre " JavaScript: The Good Parts " de Douglas Crockford.

Les exemples parlent clairement:

var A = 123.456789;

A.toFixed()      // 123
A.toFixed(0)     // 123
A.toFixed(1)     // 123.5
A.toFixed(2)     // 123.46
A.toFixed(3)     // 123.457
A.toFixed(4)     // 123.4568
A.toFixed(5)     // 123.45679
A.toFixed(6)     // 123.456789
A.toFixed(7)     // 123.4567890
A.toFixed(8)     // 123.45678900
A.toFixed(9)     // 123.456789000
A.toFixed(10)    // 123.4567890000
A.toFixed(11)    // 123.45678900000

A.toPrecision()      // 123.456789 
A.toPrecision(0)     // --- ERROR --- 
A.toPrecision(1)     // 1e+2
A.toPrecision(2)     // 1.2e+2
A.toPrecision(3)     // 123
A.toPrecision(4)     // 123.5
A.toPrecision(5)     // 123.46
A.toPrecision(6)     // 123.457
A.toPrecision(7)     // 123.4568
A.toPrecision(8)     // 123.45679
A.toPrecision(9)     // 123.456789
A.toPrecision(10)    // 123.4567890
A.toPrecision(11)    // 123.45678900

Je pense qu'il vaut mieux y répondre par un exemple.

Disons que vous disposez des données suivantes:

var products = [
  {
    "title": "Really Nice Pen",
    "price": 150
  },
  {
    "title": "Golf Shirt",
    "price": 49.99
  },
  {
    "title": "My Car",
    "price": 1234.56
  }
]

Vous souhaitez afficher chacun de ces produits avec le titre et le prix formaté. Essayons d'utiliser d' toPrecisionabord:

document.write("The price of " + products[0].title + " is $" + products[0].price.toPrecision(5));

The price of Really Nice Pen is $150.00

Cela a l'air bien, vous pourriez donc penser que cela fonctionnera également pour les autres produits:

document.write("The price of " + products[1].title + " is $" + products[2].price.toPrecision(5));
document.write("The price of " + products[2].title + " is $" + products[2].price.toPrecision(5));

The price of Golf Shirt is $49.990
The price of My Car is $1234.6

Pas si bon. Nous pouvons résoudre ce problème en modifiant le nombre de chiffres significatifs pour chaque produit, mais si nous parcourons la gamme de produits, cela pourrait être délicat. Utilisons à la toFixedplace:

document.write("The price of " + products[0].title + " is $" + products[0].price.toFixed(2));
document.write("The price of " + products[1].title + " is $" + products[2].price.toFixed(2));
document.write("The price of " + products[2].title + " is $" + products[2].price.toFixed(2));

The price of Really Nice Pen is $150.00
The price of Golf Shirt is $49.99
The price of My Car is $1234.56

Cela produit ce que vous attendiez. Il n'y a pas de travail de conjecture et il n'y a pas d'arrondi.

Juste:

49.99.toFixed(5)
// → "49.99000"

49.99.toPrecision(5)
// → "49.990"

Dans certaines circonstances, toPrecision()renvoie la notation exponentielle, alors que ce toFixed()n'est pas le cas.

Par exemple, nous considérons la variable a comme, var a = 123,45 a.toPrecision (6) La sortie est 123,450 a.toFixed (6) La sortie est comme 123,450000 // 6 chiffres après la virgule décimale

Les deux toPrecision()et toFixed()sont des fonctions conçues pour formater un nombre avant de l'imprimer. Ils renvoient donc tous les deux des Stringvaleurs.

Il y a une exception. Si vous utilisez ces fonctions sur un littéral Number négatif , en raison de la priorité des opérateurs, un Number est renvoyé. Cela signifie que toFixed()ou toPrecision()retournera d'abord une chaîne, puis le- opérateur moins convertira la chaîne en un nombre sous forme de valeur négative. Veuillez voir ci-dessous pour un exemple.

toPrecision()renvoie un Stringreprésentant l'objet Number en notation à virgule fixe ou exponentielle arrondie à des chiffres significatifs. Donc, si vous spécifiez que vous voulez une précision de 1, il renvoie le premier nombre significatif avec la notation scientifique pour indiquer les puissances de 10 ou les 0 précédents avant sa virgule décimale si le nombre significatif est <0.

const num1 = 123.4567;

// if no arguments are passed, it is similar to converting the Number to String
num1.toPrecision();   // returns "123.4567

// scientific notation is used when you pass precision count less than total
// number of digits left of the period
num1.toPrecision(2);  // returns "1.2e+2"

// last digit is rounded if precision is less than total significant digits
num1.toPrecision(4);  // returns "123.5"
num1.toPrecision(5);  // returns "123.46"

const largeNum = 456.789;
largeNum.toPrecision(2);  // returns "4.6e+2"

// trailing zeroes are added if precision is > total digits of the number or float
num1.toPrecision(9);  // returns "123.456700"

const num2 = 123;
num2.toPrecision(4);  // returns "123.0"

const num3 = 0.00123;
num3.toPrecision(4);  // returns "0.001230"
num3.toPrecision(5);  // returns "0.0012300"

// if the number is < 1, precision is by the significant digits
num3.toPrecision(1);  // returns "0.001"

toFixed()renvoie un Stringreprésentant l'objet Number en notation à virgule fixe, arrondi vers le haut. Cette fonction ne se soucie que des nombres décimaux

const num1 = 123.4567;

// if no argument is passed, the fractions are removed
num1.toFixed();  // returns "123"

// specifying an argument means you the amount of numbers after the decimal point
num1.toFixed(1);  // returns "123.5"
num1.toFixed(3);  // returns "123.457"
num1.toFixed(5);  // returns "123.45670"
num1.toFixed(7);  // returns "123.4567000"

// trying to operator on number literals
2.34.toFixed(1);  // returns "2.3"
2.toFixed(1);     // returns SyntaxError
(2).toFixed(1);   // returns "2.0"
(2.34e+5).toFixed(1);  // returns "234000.0"

J'ai mentionné ci-dessus une exception où l'utilisation de ces fonctions sur des littéraux numériques négatifs renverra un nombre et non une chaîne en raison de la priorité des opérateurs. Voici quelques exemples:

// Note: these are returning as Number
// toPrecision()
-123.45.toPrecision();  // returns -123.45
-123.45.toPrecision(2);  // returns -120
-123.45.toPrecision(4);  // returns -123.5
-2.34e+2.toPrecision(1);  // returns -200
-0.0456.toPrecision(1);  // returns -0.05
-0.0456.toPrecision(6);  // returns -0.0456

// toFixed()
-123.45.toFixed();  // returns -123.45
-123.45.toFixed(1);  // returns -123.5
-123.45.toFixed(4);  // returns -123.45
-0.0456.toFixed(1);  // returns -0
-0.0456.toFixed(6);  // -0.0456

Fait amusant: il y a des zéros signés vus de -0.0456.toFixed(1)

Voir: Est-ce que +0 et -0 sont identiques?