Heim > Web-Frontend > js-Tutorial > Teilen von 4 Formatierungsmethoden für digitale Tausenderstellen, die in JS_Javascript-Kenntnissen implementiert sind

Teilen von 4 Formatierungsmethoden für digitale Tausenderstellen, die in JS_Javascript-Kenntnissen implementiert sind

WBOY
Freigeben: 2016-05-16 16:11:49
Original
1062 Leute haben es durchsucht

Die sogenannte Tausenderform von Zahlen, d. h. beginnend mit der einzelnen Ziffer, fügen Sie zwischen jeweils drei Ziffern ein Komma ein. Zum Beispiel „10.000“. Als Reaktion auf diese Anforderung habe ich zunächst eine Funktion wie diese geschrieben:

Code kopieren Der Code lautet wie folgt:

//Methode 1
Funktion toThousands(num) {
var result = [ ], counter = 0;
num = (num || 0).toString().split('');
for (var i = num.length - 1; i >= 0; i--) {
Zähler ;
         result.unshift(num[i]);
If (!(counter % 3) && i != 0) { result.unshift(','); }
Rückgabe result.join('');
}

Der Ausführungsprozess der ersten Methode besteht darin, die Zahlen in Zeichenfolgen umzuwandeln, sie in Arrays aufzuteilen und dann die Elemente im Array, beginnend am Ende, nacheinander am Anfang des neuen Arrays (Ergebnis) einzufügen. Jedes Mal, wenn ein Element eingefügt wird, zählt der Zähler einmal (plus 1). Wenn der Zähler ein Vielfaches von 3 ist, wird ein Komma eingefügt. Beachten Sie jedoch, dass am Anfang kein Komma erforderlich ist (wenn i 0 ist). Abschließend wird das Ergebnis durch Aufrufen der Join-Methode des neuen Arrays ermittelt.
Methode 1 ist relativ klar und leicht zu verstehen und wird seit einiger Zeit im Projekt verwendet. Aber meine Intuition sagt mir, dass die Leistung nicht gut ist.

Methode 2 – String-Version von Methode 1


Code kopieren Der Code lautet wie folgt:
//Methode 2
Funktion toThousands(num) {
var result = '', counter = 0;
num = (num || 0).toString();
for (var i = num.length - 1; i >= 0; i--) {
Zähler ;
result = num.charAt(i) result;
If (!(counter % 3) && i != 0) { result = ',' result; }
Ergebnis zurückgeben;
}


Methode 2 ist eine verbesserte Version von Methode 1. Sie unterteilt die Zeichenfolge nicht in Arrays und bearbeitet immer die Zeichenfolge.

Methode 3 – Schleife, um die letzten drei Zahlen abzugleichen


//Methode 3
Funktion toThousands(num) {
var num = (num || 0).toString(), re = /d{3}$/, result = '';
While ( re.test(num) ) {
          result = RegExp.lastMatch result;
If (num !== RegExp.lastMatch) {
              result = ',' result;
               num = RegExp.leftContext;
         } sonst {
             num = '';
             Pause;
}
}
If (num) { result = num result; Ergebnis zurückgeben;
}



Methode 3 ist ein völlig anderer Algorithmus. Sie durchläuft reguläre Ausdrücke, um die drei Zahlen am Ende abzugleichen. Bei jeder Übereinstimmung werden das Komma und der übereinstimmende Inhalt am Anfang der Ergebniszeichenfolge eingefügt target (num) Weisen Sie den Wert dem Inhalt zu, der noch nicht abgeglichen wurde (RegExp.leftContext). Beachten Sie außerdem:
1. Wenn die Anzahl der Ziffern ein Vielfaches von 3 ist, muss der letzte übereinstimmende Inhalt drei Ziffern sein, es ist jedoch nicht erforderlich, vor den ersten drei Ziffern Kommas einzufügen; 2. Wenn die Anzahl der Ziffern in der Zahl kein Vielfaches von 3 ist, bleiben am Ende definitiv 1 oder 2 Zahlen in der Variablen „num“ übrig. Nach der Schleife sollten die restlichen Zahlen am Anfang eingefügt werden Ergebniszeichenfolge.

Obwohl Methode drei die Anzahl der Schleifen reduziert (Verarbeitung von drei Zeichen in einer Schleife), erhöht sie aufgrund der Verwendung regulärer Ausdrücke den Verbrauch in gewissem Maße.


Methode 4 – String-Version von Methode 3


Code kopieren

Der Code lautet wie folgt:

//Methode 4
Funktion toThousands(num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
          result = ',' num.slice(-3) result;
​​​​ num = num.slice(0, num.length - 3);
}
If (num) { result = num result; Ergebnis zurückgeben;
}

Tatsächlich kann die Funktion des Abfangens der letzten drei Zeichen durch die Slice-, Substr- oder Substring-Methode des String-Typs erreicht werden. Auf diese Weise vermeiden Sie die Verwendung regulärer Ausdrücke.

Methode Fünf – Gruppierungs- und Zusammenführungsmethode


Code kopieren Der Code lautet wie folgt:
//Methode 5
Funktion toThousands(num) {
var num = (num || 0).toString(), temp = num.length % 3;
Schalter (Temp) {
Fall 1:
              num = '00' num;
             Pause;
Fall 2:
              num = '0' num;
             Pause;
}
Gibt num.match(/d{3}/g).join(',').replace(/^0 /, '');
zurück }

Ergänzen Sie zunächst die Anzahl der Ziffern zu einem Vielfachen von 3, teilen Sie sie mit regulären Ausdrücken in Gruppen von drei Ziffern auf, fügen Sie dann mit der Join-Methode Kommas hinzu und entfernen Sie schließlich die ergänzten Nullen.

Methode Sechs – Die Methode des faulen Mannes


Code kopieren Der Code lautet wie folgt:
//Methode 6
Funktion toThousands(num) {
Return (num || 0).toString().replace(/(d)(?=(?:d{3}) $)/g, '$1,');
}

Ich hatte immer das Gefühl, dass diese Formatierung durch das Ersetzen eines regulären Ausdrucks erreicht werden kann, erfordert jedoch die Verwendung von Behauptungen und anderen Schreibmethoden. Leider bin ich mit diesem Teil nicht vertraut. Nach einigem Suchen bei Google habe ich tatsächlich einen solchen regulären Ausdruck gefunden. Dies ist wahrscheinlich die kürzeste Implementierung des Codes.
Testergebnisse

数字 执行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
Der starke Vergleich zwischen Methode 1 und Methode 2 zeigt, dass die Effizienz von String-Operationen viel höher ist als die von Array-Operationen. Die Testergebnisse von Methode 6 zeigen, dass die Länge des Codes nichts mit der Leistung zu tun hat. Methode 4 hat die beste Gesamtleistung (aber warum die Leistung reduziert wird, wenn num 100 ist, verstehe ich wirklich nicht. Der Hauptgrund ist:

1. Beim Vergleich der Methoden eins und zwei verwendet jede Operation 3 Zeichen anstelle von 1 Zeichen, um die Anzahl der Schleifen zu reduzieren 2. Im Vergleich zu den Methoden drei, fünf und sechs werden keine regulären Ausdrücke verwendet, was den Verbrauch reduziert.


Schließlich habe ich Methode vier als endgültige Optimierungslösung ausgewählt. Wenn Leser bessere Implementierungsmethoden oder Verbesserungsvorschläge haben, können Sie Kommentare hinterlassen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage