Formatage du nombre résultat d'un calcul

Bonjour à tous...

Je sais formater un nombre en php avec number_format($total, 2, ',', ' ');
pour avoir ce genre d'affichage : 123 456,78 (ou 123 456.78)
Mais si je veux faire la même chose en JavaScript en sortie de calcul, comment dois-je écrire
ma syntaxe JavaScript ?

J'ai vu des trucs comme ça sur Internet :
n = n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
Mais qu'est-ce que ça veut dire et comment l'adapter pour moi ?

ou ça :
const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"
(Comment virer le €, comment remplacer le point par un espace et la virgule par un point ?)

Voici le code pour lequel j'aimerai faire cette modif :

<input class="input-formulaire prix-formulaire" name="quantite" id="quantite" type="text" value="" onblur="formatage(this);" onkeypress="return chiffres(event);" autocomplete="off"/>

function formatage(arg) {
    var euro = parseFloat(arg.value); 
    if (!isNaN(euro)){
        euro = euro.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
        arg.value = euro;
    }
}

ATTENTION : il faut que le nouveau format soit toujours un nombre prêt à être inséré
dans une bdd !
Merci d'avance pour votre aide !
Modifié par etienne69 (03 Mar 2022 - 14:29)

Salut

Si je récape, tu veux que 12345678 en entrée deviennent 123 456,78 en sortie

Du coup si le code reçoit 1234567 il faut 12 345,67 en sortie?

Comme on dit chez moi, "n'allons pas chercher midi à 14h00" :

IntlNumberFormat.NumberFormat().format(nombre)

CodePen

Édit : pardon, je n'avais pas vu que cette solution faisait déjà partie de votre deuxième piste de recherche. Donc, elle se comporte en fonction de la configuration de la locale. Là par exemple, vous avez configuré pour de l'allemand. Essayez maintenant votre exemple en le modifiant un peu :

const value = new Intl.NumberFormat('fr-FR').format(nombre)

Modifié par Olivier C (03 Mar 2022 - 18:46)

Il y a un peu de confusion dans les déclarations des variables, et la fonction ne renvoie rien... je vais vous donner un exemple de comment j'aurais opéré pour vous aiguiller :

const test = {value: '100000000'}

/**
 * @param {number|string} n
 * @param {string} bcp47 ['fr-FR']
 * @param {string} style ['decimal']
 * @param {string} currency ['EUR']
 */
const numberFormat = (n, bcp47 = 'fr-FR', style = 'decimal', currency = 'EUR') => {
  n = parseFloat(n)
  n = new Intl.NumberFormat(bcp47, {style: style, currency: currency}).format(n)
  return n
}

// Exemples :
console.log('FR (par défaut) : ' + numberFormat(test.value)) // -> 100?000,00
console.log('DE : ' + numberFormat(test.value, 'de-DE')) // -> 100.000.000,00
console.log('number : ' + numberFormat(100000)) // -> 100?000,00
console.log('string : ' + numberFormat('100000')) // -> 100?000,00
console.log('currency : ' + numberFormat(100000, 'fr-FR', 'currency')) // -> 100?000,00 €
console.log('currency, USD : ' + numberFormat(100000, 'en-US', 'currency', 'USD')) // -> $100,000.00

Modifié par Olivier C (03 Mar 2022 - 22:14)

Nota bene : le forum ne renvoie pas les chaines de caractères correctement, voici le CodePen : numberFormat

etienne69 a écrit :
Je n'arrive pas à me servir ni à comprendre l'utilité de :

const numberFormat = (n, bcp47 = 'fr-FR'....

Le nom de la variable "bcp47" c'est la norme par défaut pour les tucs du genre 'fr-FR' que l'on retrouve souvent dans les codes de variables locales.

Lorsque je code un truc, j'évite de m'enfermer dans un cas particulier, par exemple ici le français. Je préfère toujours coder une fonction généraliste facile à étendre par la suite, quitte comme dans mon exemple à définir par défaut des valeurs qui m'arrangent (comme le français).

etienne69 a écrit :
Ce morceau de code est parfait pour l'input 'prix' mais pour l'input 'quantité' puis-je virer le symbole € ?

Il suffit de supprimer des paramètres :

new Intl.NumberFormat('fr-FR'.format(euro)

Tout est indiqué dans la documentation.

Sinon, avec ma solution, il suffisait d'appeler la fonction ainsi pour avoir ce résultat :

numberFormat(arg.value)

Un point encore : la fonction que vous avez défini est dépendante du nom de votre variable, ce qui n'a pas lieu d'être. Cela rend le code rigide, au moindre changement il faut tout réviser.

Salut à vous, voisin lyonnais.
Modifié par Olivier C (04 Mar 2022 - 15:56)

Je suis désolé d'être un peu long à la détente mais j'essaie d'appliquer tes conseils et je n'y arrive pas ! Tous les sites (y compris https://developer.mozilla.org/) et vidéos que je regarde utilisent toujours la console comme sortie pour l'affichage de la variable formatée hors j'aimerais comprendre comment appeler ta fonction depuis la perte de focus de l'input (blur) et comment ce même input récupère t-il la valeur envoyée par return n

onblur="numberFormat(this);" ne fonctionne pas ni
onblur="numberFormat(arg.value);"
onblur="numberFormat(n);"
onblur="numberFormat();"


D'autre part, à quoi correspond le 1° n dans :
const numberFormat = (n, ...

Enfin si certains input sont des euros et d'autres des quantités cela voudra dire qu'il faudra faire 2 fonctions différentes pour avoir soit € soit rien ?

Merci d'avance pour ta patience !

D'accord. Le souci n'est pas d'utiliser javascript... enfin si, un peu, mais il s'agit surtout de comprendre comment fonctionne grosso modo une fonction. Par exemple, pour mon code, le "n" est le premier argument déclaré dans la fonction et, comme je l'ai indiqué dans ce commentaire... :

/**
 * @param {number|string} n
*/

... il doit être sous forme numérique ou chaîne de caractère. Mais lorsque l'on APPELLE la fonction, on met ce que l'on veut comme variable, du moins celle que l'on veut récupérer :

numberFormat(laVariableQueJeVise)

Ensuite c'est la fonction qui réaffecte la variable sous le vocable "n" dans ses arguments. Les fonctions PHP procèdent de même.

C'est ici le seul argument obligatoire, j'ai rendu tous les autres arguments de la fonction facultatifs en les affectant par défaut, comme pour cette variable :

bcp47 = 'fr-FR'

Pour l'adaptation à vos besoins, je ne connais pas le contexte qui dépasse le cadre de la question initiale, mais il faut savoir que j'ai écris la fonction de manière agnostique, afin qu'elle opère dans n'importe quel contexte. Il suffit de récupérer la valeur de l'input et de le passer dans la fonction. Si elle pose problème, la récupération de cette valeur d'input pourrait être le sujet d'une nouvelle question sur le forum, avec un peu plus de contexte (le résultat attendu, le code html, etc). En attendant voici peut-être une piste :

document.querySelector('#quantite').addEventListener('blur', (event) => {
  const valueFormated = numberFormat(event.target.value)
}, true)
// Ensuite j'utilise la variable `valueFormated` comme je veux...

Bien cordialement.
Modifié par Olivier C (04 Mar 2022 - 21:47)