Wie verwende ich padStart() und padEnd(), um Strings in JS zu formatieren? (Tipps)

Vor ein paar Tagen habe ich mit JavaScript einen Countdown-Timer erstellt, also musste ich Sekunden und Millisekunden formatieren. Ich wollte, dass Sekunden immer eine zweistellige Länge haben und Millisekunden immer eine Länge von 3 haben Die Länge in Ziffern, mit anderen Worten, ich möchte, dass 1 Sekunden als 01 und 1 Millisekunden als 001 angezeigt werden.

Am Ende habe ich meine eigene Funktion geschrieben, um die Zahlen zu „füllen“, aber ich habe entdeckt, dass JavaScript über integrierte Funktionen padStart() und padEnd() verfügt Machen Sie das mit diesen Funktionen. In diesem Artikel werfen wir einen Blick darauf, wie Sie diese integrierten Funktionen in JavaScript nutzen können!

Anwendungsfälle

Beginnen wir mit der Vorstellung einiger verschiedener Anwendungsfälle für die Polsterung.

Beschriftung und Wert

Angenommen, Sie haben Beschriftung und Wert in derselben Zeile, zum Beispiel name：zhangsan und Phone Number：（555）-555-1234. Es würde etwas seltsam aussehen, wenn man sie zusammenfügt, es wäre so:

Name: zhangsan
Phone Number: (555)-555-1234

Das könnte dir gefallen.

Name:           zhangsan
Phone Number:   (555)555-1234

Oder dieser...

        Name: zhangsan
Phone Number: (555)555-1234

Betrag

In China werden bei der Preisanzeige meist zweistellige Dimes und Cents angezeigt. Also statt dessen...

￥10.1

Du wirst das hier wollen.

￥10.01

Datum

Für das Datum sind sowohl Tag als auch Monat zweistellig. Also statt dessen...

2020-5-4

Du wirst das hier wollen.

2020-05-04

Zeit

Ähnlich wie beim Datum oben benötigen Sie für den Timer 2 Ziffern für Sekunden und 3 Ziffern für Millisekunden. Also statt dessen...

1:1

Du wirst das hier wollen.

01:001

padstart()

Beginnen wir mit padStart() und den Label- und Wertbeispielen. Nehmen wir an, wir möchten, dass die Beschriftungen richtig aneinander ausgerichtet sind, sodass die Werte an derselben Position beginnen.

        Name: zhangsan
Phone Number: (555)555-1234

Da Phone Number das längere der beiden Tags ist, fügen wir am Anfang des Name-Tags ein Leerzeichen ein. Füllen wir es für zukünftige Anforderungen nicht speziell auf die Länge der Telefonnummer auf, sondern auf etwas mehr, sagen wir 20 Zeichen. Auf diese Weise funktioniert der Trick auch dann noch, wenn Sie in Zukunft längere Etiketten verwenden.

Dies ist der Startcode zum Anzeigen dieser Informationen, bevor sie ausgefüllt werden.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);

//Name: zhangsan
//Phone Number: (555)-555-1234

Jetzt füllen wir das erste Tag aus. Um padStart() aufzurufen, müssen Sie zwei Parameter übergeben: einen für die Ziellänge der Füllzeichenfolge und einen für die Zeichen, die Sie auffüllen möchten. In diesem Fall soll die Länge 20 betragen und die Füllzeichen Leerzeichen sein.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2 + ": " + phoneNumber);

//               Name: zhangsan
////Phone Number: (555)-555-1234

Füllen Sie nun die zweite Zeile aus.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2.padStart(20, " ") + ": " + phoneNumber);

//               Name: zhangsan
////     Phone Number: (555)-555-1234

padEnd()

Für das gleiche Label- und Wertbeispiel ändern wir die Art und Weise, wie wir die Labels auffüllen. Richten wir die Beschriftung links aus, damit wir am Ende eine Polsterung hinzufügen können.

Anfangscode

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);

//Name: zhangsan
//Phone Number: (555)-555-1234

Jetzt füllen wir das erste Tag aus, ähnlich wie zuvor, aber mit zwei kleinen Unterschieden. Jetzt verwenden wir padEnd() anstelle von padStart() und müssen den Doppelpunkt vor dem Auffüllen mit der Beschriftung verbinden, damit wir sicherstellen, dass sich der Doppelpunkt an der richtigen Stelle befindet.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log(label2 + ": " + phoneNumber);

//Name:               zhangsan
//Phone Number: (555)-555-1234

Beide Zeilen sind jetzt ausgefüllt.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber);

//Name:               zhangsan
//Phone Number:       (555)-555-1234

Was ist mit Zahlen (Preise, Daten, Timer usw.)?

Die Auffüllfunktion ist speziell für Zeichenfolgen gedacht, nicht für Zahlen. Daher müssen wir die Zahl zuerst in eine Zeichenfolge umwandeln.

Preis

Werfen wir einen Blick auf den Anfangscode, der den Preis anzeigt.

const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents); //￥10.1

Um die Punkte zu füllen, müssen wir sie zuerst in eine Zeichenfolge konvertieren und dann die Funktion padStart() aufrufen, wobei wir die Länge als 1 und das Füllzeichen als „0“ angeben; 🎜>

Datum

Dies ist der Anfangscode zur Anzeige des Datums.

const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents.toString().padStart(2,0)); //￥10.01

Jetzt geben wir den Monat ein, um sicherzustellen, dass es sich um eine zweistellige Zahl handelt.

const month = 2;
const year = 2020;

console.log(year + "-" + month); //2020-2

Timer

Endlich unser Timer, wir wollen zwei verschiedene Zahlen formatieren, Sekunden und Millisekunden. Obwohl die gleichen Grundsätze gelten. Dies ist der ursprüngliche Code.

const month = 2;
const year = 2020;

console.log(year + "-" + month.toString().padStart(2,"0")); // 2020-02

Nun zum Auffüllen, ich werde es in einer separaten Zeile machen, damit es leichter zu lesen ist.

const seconds = 1;
const ms = 1;

console.log(seconds + ":" + ms); //1:1

EndlichEs ist zwar nicht schwer, eine eigene Füllfunktion zu schreiben, aber warum sollte man das selbst tun, wenn sie bereits in JavaScript integriert ist? ? Es sind viele interessante Funktionen bereits integriert. Es könnte sich lohnen, eine kurze Suche durchzuführen, bevor Sie selbst etwas bauen.

Dieser Artikel ist reproduziert von: https://segmentfault.com/a/1190000022812375

Verwandte Tutorial-Empfehlungen:

JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie verwende ich padStart() und padEnd(), um Strings in JS zu formatieren? (Tipps). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!