Partage de 4 méthodes de formatage numérique mille lieux implémentées dans les compétences JS_javascript

La forme dite des milliers de nombres, c'est-à-dire qu'en commençant par un seul chiffre, ajoutez une virgule entre tous les trois chiffres. Par exemple "10 000". En réponse à cette exigence, j'ai initialement écrit une fonction comme celle-ci :

Copier le code Le code est le suivant :

//Méthode 1
fonction en milliers (num) {
var résultat = [ ], compteur = 0;
num = (num || 0).toString().split('');
pour (var i = num.length - 1; i >= 0; i--) {
compteur ;
         result.unshift(num[i]);
If (!(counter % 3) && i != 0) { result.unshift(','); >
Renvoie result.join('');
>

Le processus d'exécution de la première méthode consiste à convertir les nombres en chaînes, à les diviser en tableaux, puis à insérer les éléments du tableau au début du nouveau tableau (résultat) un par un en commençant par la fin. Chaque fois qu'un élément est inséré, counter compte une fois (plus 1). Lorsque counter est un multiple de 3, une virgule est insérée, mais notez qu'aucune virgule n'est requise au début (quand i vaut 0). Enfin, le résultat est obtenu en appelant la méthode join du nouveau tableau.
La méthode 1 est relativement claire et facile à comprendre, et est utilisée dans le projet depuis un certain temps. Mais mon intuition me dit que ses performances ne sont pas bonnes.

Méthode 2 - version chaîne de la méthode 1

Copier le code Le code est le suivant :

//Méthode 2
fonction en milliers (num) {
var résultat = '', compteur = 0;
num = (num || 0).toString();
pour (var i = num.length - 1; i >= 0; i--) {
compteur ;
résultat = num.charAt(i) résultat;
If (!(counter % 3) && i != 0) { result = ',' result }
>
Résultat de retour ;
>

La méthode 2 est une version améliorée de la méthode 1. Elle ne divise pas la chaîne en tableaux et opère toujours sur la chaîne.
Méthode 3 - Boucle pour faire correspondre les trois derniers nombres

Copier le code Le code est le suivant :

//Méthode 3
fonction en milliers (num) {
var num = (num || 0).toString(), re = /d{3}$/, result = '';
Tandis que ( re.test(num) ) {
          résultat = résultat RegExp.lastMatch ;
Si (num !== RegExp.lastMatch) {
              résultat = ',' résultat ;
               num = RegExp.leftContext;
         } autre {
             num = '';
             pause ;
>
>
Si (num) { résultat = num résultat }
Résultat de retour ;
>

La méthode 3 est un algorithme complètement différent. Elle parcourt les expressions régulières pour faire correspondre les trois nombres à la fin, la virgule et le contenu correspondant sont insérés au début de la chaîne de résultat, puis la correspondance. target (num) Attribue la valeur au contenu qui n'a pas encore été mis en correspondance (RegExp.leftContext). A noter également :

1. Si le nombre de chiffres est un multiple de 3, le dernier contenu correspondant doit être composé de trois chiffres, mais il n'est pas nécessaire d'ajouter des virgules avant les trois premiers chiffres ; 2. Si le nombre de chiffres dans le nombre n'est pas un multiple de 3, alors il restera certainement 1 ou 2 nombres dans la variable num à la fin. Après la boucle, les nombres restants doivent être insérés au début du nombre. chaîne de résultat.

Bien que la troisième méthode réduise le nombre de boucles (traitement de trois caractères dans une boucle), elle augmente dans une certaine mesure la consommation en raison de l'utilisation d'expressions régulières.

Méthode 4 - Version chaîne de la méthode 3

Copier le code Le code est le suivant :

//Méthode 4
fonction en milliers (num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
          résultat = ',' num.slice(-3) résultat ;
​​​​ num = num.slice(0, num.length - 3);
>
Si (num) { résultat = num résultat }
Résultat de retour ;
>

En fait, la fonction d'interception des trois derniers caractères peut être réalisée grâce à la méthode slice, substr ou substring du type chaîne. De cette façon, vous évitez d’utiliser des expressions régulières.

Méthode cinq - Méthode de regroupement et de fusion

Copier le code Le code est le suivant :

//Méthode 5
fonction en milliers (num) {
var num = (num || 0).toString(), temp = num.length % 3;
interrupteur (temp) {
cas 1 :
              num = '00' num;
             pause ;
cas 2 :
              num = '0' num;
             pause ;
>
Renvoie num.match(/d{3}/g).join(',').replace(/^0 /, '');
>

Complétez d'abord le nombre de chiffres à un multiple de 3, utilisez des expressions régulières pour le couper en groupes de trois chiffres, puis ajoutez des virgules via la méthode de jointure et enfin supprimez les 0 complétés.

Méthode six - La méthode de l'homme paresseux

Copier le code Le code est le suivant :

//Méthode 6
fonction en milliers (num) {
Return (num || 0).toString().replace(/(d)(?=(?:d{3}) $)/g, '$1,');
>

J'ai toujours pensé que ce formatage pouvait être effectué en remplaçant une expression régulière, mais cela nécessite l'utilisation d'assertions et d'autres méthodes d'écriture. Malheureusement, je ne connais pas cette partie. Après quelques recherches sur Google, j'ai trouvé une telle expression régulière. C'est probablement l'implémentation la plus courte du code.

Résultats des tests

数字	执行5000次消耗的时间（ms）
	方法一	方法二	方法三	方法四	方法五	方法六
1	4	1	3	1	14	2
10	14	1	3	0	7	2
100	12	1	2	4	5	3
1000	13	2	3	2	9	5
10000	21	4	3	1	6	3
100000	21	3	2	1	5	6

La forte comparaison entre la méthode 1 et la méthode 2 montre que l'efficacité des opérations sur les chaînes est bien supérieure à celle des opérations sur les tableaux ; les résultats des tests de la méthode 6 nous disent que la longueur du code n'a rien à voir avec les performances. La méthode 4 a les meilleures performances globales (mais pourquoi les performances sont réduites lorsque num est de 100, je ne comprends vraiment pas. La raison principale est :

).

1. En comparant les méthodes un et deux, chaque opération utilise 3 caractères au lieu de 1 caractère pour réduire le nombre de boucles
2. Par rapport aux méthodes trois, cinq et six, les expressions régulières ne sont pas utilisées, ce qui réduit la consommation.

Enfin, j'ai choisi la méthode quatre comme solution d'optimisation finale. Si les lecteurs ont de meilleures méthodes de mise en œuvre ou des suggestions d'amélioration, vous pouvez laisser des commentaires.