Formater un nombre en JavaScript

Il existe différentes manières pour les personnes de différents pays et régions de suivre différentes manières de formater un nombre. Et il peut arriver que nous souhaitions formater un numéro sur nos sites Web en fonction de la partie du monde où le visiteur accède à notre site Web.

Cela pourrait devenir difficile si vous essayez de le faire manuellement en fonction de l’emplacement de l’utilisateur. Mais ne vous inquiétez pas, vous n’avez pas à le faire manuellement car il existe une meilleure façon de formater un nombre en JavaScript, et c’est à l’aide de la méthode toLocalString(). Cette méthode renvoie une chaîne avec la représentation spécifique à la langue du nombre.

Formater des nombres avec la méthode toLocaleString() en JavaScript

Il faut deux paramètres, le premier est locales, et le second est options. Ces deux paramètres sont facultatifs, ce qui signifie qu’ils ne sont pas obligatoires. Vous pouvez également exécuter directement la méthode sans passer ces paramètres. Si vous souhaitez formater les nombres, dans ce cas, nous le faisons, nous devons alors passer ces paramètres.

Comprenons d’abord ce que signifie chacun de ces paramètres, puis plus tard, nous verrons comment les utiliser dans notre code.

1. Le paramètre locales

Les locales sont le premier paramètre accepté par la méthode toLocalString(). Il représente une chaîne de balises de langue BCP 47 ou un tableau de telles chaînes. La balise de langue BCP 47 est un code pour identifier les langues humaines.

Par exemple, le tag ar-SA indique qu’il s’agit de la langue arabe représentée par ar, parlée dans la région d’Arabie saoudite SA. Donc, si vous passez cette chaîne comme premier argument, le nombre sera formaté pour qu’il soit écrit en langue arabe.

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

Production:

١٢٬٣٤٥

Ici, nous avons créé une fonction flèche appelée eArabic, qui prend un nombre en paramètre. Maintenant, nous passons le nombre 12345 à cette fonction flèche. Cette fonction a pour but de convertir le nombre 12345 dans son format équivalent arabe ar-SA à l’aide de la méthode toLocalString().

Vous pouvez directement copier et coller l’intégralité du code ci-dessus et l’exécuter dans la fenêtre de la console de votre navigateur pour voir le résultat.

Pour en savoir plus sur toutes les balises de langues BCP 47, vous pouvez consulter cette ressource.

Vous pouvez également passer undefined comme locales. Il prendra la langue par défaut définie dans le navigateur du visiteur. Donc, si quelqu’un a changé la langue de son navigateur en allemand, cela affichera le numéro au format allemand.

2. Le paramètre options

L’options est un objet, et c’est le deuxième paramètre qu’accepte la méthode toLocalString(). Puisqu’il s’agit d’un objet, ce paramètre peut prendre diverses propriétés comme currency, currencySign, style, unitDisplay, et bien d’autres.

Reprenons le même exemple que nous avons pris ci-dessus, et essayons de le modifier pour comprendre le paramètre options. Auparavant, nous prenions simplement le numéro 12345 et le formations ensuite en langue arabe. Maintenant, donnons également au nombre un formatage monétaire en lui donnant un style de devise avec le symbole monétaire et ajoutons quelques chiffres de fraction à la fin de ce nombre à l’aide des options.

let eArabic = (number => {
  return number.toLocaleString(
      'ar-SA', {style: 'currency', currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

Production:

١٢٬٣٤٥٫٠٠٠ ر.س

Dans ce cas, à la méthode toLocaleString(), nous avons maintenant également ajouté le paramètre options, qui est un objet. Actuellement, il faut 3 propriétés, la propriété style formatera le nombre au format monétaire, la propriété currency dira quelle devise elle représente, dans ce cas, le riyal saoudien SAR et la propriété minimumFractionDigits représente combien chiffres fractionnaires que vous souhaitez afficher à la fin du nombre.

Ici, si vous définissez la propriété style avec la valeur devise, vous devez également définir la propriété devise avec une certaine valeur. Sinon, vous obtiendrez une erreur de type : Currency code is required with currency style.

Dans la sortie du programme ci-dessus, nous avons d’abord le nom de la devise Riyal saoudien ر.س.. S’il s’agissait de USD, ce serait le symbole $. Ensuite, nous avons le numéro lui-même en langue arabe ١٢٬٣٤٥. Si c’était en USD, alors ce serait 12,345. Enfin, nous avons les 3 chiffres fractionnaires après le point qui est représenté en langue arabe par ٫٠٠٠ et USD par .000.

// USD format
$12, 345.000

Ici, nous vous fournissons également la sortie pour le format monétaire des États-Unis afin de la relier facilement à la sortie du format monétaire saoudien, car il peut être difficile pour les gens de comprendre la langue arabe.

Vous pouvez utiliser n’importe lequel de ces paramètres et propriétés d’objet dans votre code en fonction de la façon dont vous souhaitez formater votre nombre. Vous pouvez également visiter les différents liens fournis dans cet article pour en savoir plus sur le toLocalString() pour formater un nombre en JavaScript.