Comment formater des nombres en tant que chaînes monétaires en JavaScript ?

Formatage des nombres en tant que chaînes de devises

Énoncé du problème :

En JavaScript, la tâche consiste à formater un prix sous forme de chaîne de devise. Plus précisément, l'objectif est de créer une fonction qui prend un float comme argument et renvoie une chaîne au format "$ 2,500.00".

Solution :

JavaScript propose un solution pratique à ce problème via le Intl.NumberFormat API.

Intl.NumberFormat

L'API Intl.NumberFormat offre un moyen flexible de formater les nombres selon des règles spécifiques aux paramètres régionaux. Pour créer un formateur de devise, nous spécifions les paramètres régionaux et le style :

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

Formatage du nombre

Une fois le formateur créé, nous pouvons l'utiliser pour formater un numéro :

let inputValue = 2500;
const formattedValue = formatter.format(inputValue); // Returns "$ 2,500.00"

Options de personnalisation

Le L'API Intl.NumberFormat propose diverses options de personnalisation pour ajuster le formatage :

• trailingZeroDisplay : Contrôle l'affichage des zéros à droite. 'stripIfInteger' supprime les zéros de fin pour les nombres entiers.
• minimumFractionDigits : Spécifie le nombre minimum de chiffres fractionnaires à afficher.
• maximumFractionDigits : Spécifie le nombre maximum de chiffres fractionnaires à display.

Exemple

L'extrait de code suivant illustre l'utilisation de Intl.NumberFormat avec certaines des options de personnalisation :

// Create number formatter.
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  trailingZeroDisplay: 'stripIfInteger',
});

// Get user input.
let input = document.getElementById('amount');

// Apply formatting and display the result.
input.addEventListener('keyup', e => {
  const formattedValue = formatter.format(e.target.value);
  document.getElementById('result').innerText = formattedValue;
});

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!