11525 sujets

JavaScript, DOM et API Web HTML5

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)
JENCAL a écrit :
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?


Salut JENCA,
Merci de te pencher sur mon problème...
En fait c'est pour formater des prix dans des input soit renseignés par l'utilisateur soit
par un calcul (Prix Unitaire x Quantités).
L'utilisateur à le droit de saisir uniquement des chiffres de 0 à 9, les signes + et - ainsi que
. pour marquer les décimales.Il arrive qu'un utilisateur saisisse 1056.3 dans l'input, je voudrais
qu'à la perte de focus ça devienne 1 056.30 (pour des question de lisibilité) et que ce soit
toujours considéré comme un chiffre car le contenu de cet input va être envoyé dans une
page php d'enregistrement...
Est-ce que c'est possible car l'espace est interdit à la saisie et il y en aurait un dans le
formatage des milliers ?
Olivier C a écrit :

Essayez maintenant votre exemple en le modifiant un peu


Bonsoir Oliver,
J'ai essayé ça :
function formatage(arg) {
                var euro = parseFloat(arg.value); 
                if (!isNaN(euro)){
                    //euro = euro.toFixed(2);
                    euro = IntlNumberFormat.NumberFormat().format(euro);
                    arg.value = euro;
                }
            }


et ça n'a pas fonctionné....
Et je ne sais pas comment utiliser ta deuxième proposition !
J'ai essayé comme ça :
Smiley decu
function formatage(arg) {
                
                var euro = parseFloat(arg.value); 
                if (!isNaN(euro)){
                    //euro = euro.toFixed(2);
                    const value = new Intl.NumberFormat('fr-FR').format(euro)
                    arg.value = euro;
                }
            }
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)
Olivier C a écrit :
Il y a un peu de confusion dans les déclarations des variables...


J'ai réussi à faire ça qui fonctionne bien, est-ce une syntaxe correcte ?
Je n'arrive pas à me servir ni à comprendre l'utilité de
const numberFormat = (n, bcp47 = 'fr-FR'....


function formatage(arg) {
    var euro = parseFloat(arg.value); 
    if (!isNaN(euro)){
        arg.value = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(euro);
    }
}


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


EDIT: Quand j'essaie d'appliquer cette même recette à d'autres cellules de calcul comme par exemple le total :
total_contrat.value = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(total_contrat);
j'obtiens NaN€...
Modifié par etienne69 (04 Mar 2022 - 14:33)
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)