Comment utiliser padStart() et padEnd() pour formater des chaînes en JS ? (Conseils)

Il y a quelques jours, je construisais un compte à rebours en utilisant JavaScript, j'avais donc besoin de formater les secondes et les millisecondes, je voulais que les secondes aient toujours une longueur de 2 chiffres et les millisecondes soient toujours de 3 La longueur en chiffres, en d'autres termes, je veux que les 1 secondes soient affichées sous la forme 01 et les 1 millisecondes sous la forme 001.

J'ai fini par écrire ma propre fonction pour "remplir" les nombres, mais j'ai découvert que JavaScript a des fonctions intégrées padStart() et padEnd() pour faites cela ces fonctions. Dans cet article, nous voyons comment exploiter ces fonctions intégrées en JavaScript !

Cas d'utilisation

Commençons par présenter quelques cas d'utilisation de remplissage différents.

Étiquette et valeur

Supposons que vous ayez une étiquette et une valeur sur la même ligne, par exemple name：zhangsan et Phone Number：（555）-555-1234. Cela aurait l'air un peu bizarre si vous les mettiez ensemble, ce serait comme ceci :

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

Vous voudrez peut-être ça.

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

Ou ceci...

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

Montant

En Chine, lors de l'affichage du prix, il indique généralement des centimes et des centimes à deux chiffres. Alors au lieu de ça...

￥10.1

Tu vas vouloir ça.

￥10.01

Date

Pour la date, le jour et le mois nécessitent 2 chiffres. Alors au lieu de ça...

2020-5-4

Tu vas vouloir ça.

2020-05-04

Heure

Similaire à la date ci-dessus, pour la minuterie, vous avez besoin de 2 chiffres pour les secondes et de 3 chiffres pour les millisecondes. Alors au lieu de ça...

1:1

Tu vas vouloir ça.

01:001

padstart()

Commençons par padStart() et les exemples d'étiquettes et de valeurs. Disons que nous voulons que les étiquettes soient correctement alignées les unes avec les autres afin que les valeurs commencent à la même position.

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

Puisque Phone Number est la plus longue des deux balises, nous ajoutons un espace au début de la balise Name. Pour les besoins futurs, ne complétons pas spécifiquement la longueur du numéro de téléphone, ajoutons-le un peu plus longtemps, disons 20 caractères. De cette façon, si vous utilisez des étiquettes plus longues à l’avenir, l’astuce fonctionnera toujours.

Il s'agit du code de démarrage permettant d'afficher ces informations avant qu'elles ne soient renseignées.

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

Maintenant, remplissons la première balise. Pour appeler padStart(), vous devez transmettre deux paramètres : un pour la longueur cible de la chaîne de remplissage et un pour les caractères que vous souhaitez remplir. Dans ce cas, nous voulons que la longueur soit de 20 et que les caractères de remplissage soient des espaces.

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

Remplissez maintenant la deuxième ligne.

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()

Pour le même exemple d'étiquette et de valeur, modifions la façon dont nous remplissons l'étiquette. Alignons l'étiquette sur la gauche afin de pouvoir ajouter un remplissage à la fin.

Code initial

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

Maintenant, remplissons la première balise, de la même manière que nous l'avons fait auparavant, mais avec deux petites différences. Maintenant, nous utilisons padEnd() au lieu de padStart(), et nous devons connecter les deux points à l'étiquette avant le remplissage, afin de nous assurer que les deux points sont au bon endroit.

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

Les deux lignes sont maintenant remplies.

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

Qu'en est-il des nombres (prix, dates, minuteries, etc.) ?

La fonction de remplissage est spécifiquement destinée aux chaînes, pas aux nombres, donc, nous devons d’abord convertir le nombre en chaîne.

Prix

Regardons le code initial qui affiche le prix.

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

Pour remplir les points, nous devons d'abord la convertir en chaîne, puis appeler la fonction padStart(), en spécifiant la longueur comme 1 et le caractère de remplissage comme '0' ; 🎜>

Date

C'est le code initial pour afficher la date.

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

Maintenant, remplissons le mois pour nous assurer qu'il s'agit d'un nombre à deux chiffres.

const month = 2;
const year = 2020;

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

Timer

Enfin notre timer, nous souhaitons formater deux nombres différents, secondes et millisecondes. Bien que les mêmes principes s’appliquent. C'est le code initial.

const month = 2;
const year = 2020;

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

Maintenant, pour le remplissage, je vais le faire sur une ligne séparée pour que ce soit plus facile à lire.

const seconds = 1;
const ms = 1;

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

EnfinBien qu'il ne soit pas difficile d'écrire votre propre fonction de remplissage, pourquoi le faire vous-même alors qu'elle est déjà intégrée à JavaScript ? ? De nombreuses fonctions intéressantes sont déjà intégrées. Cela vaut peut-être la peine de faire une recherche rapide avant de construire quelque chose vous-même.

Cet article est reproduit à partir de : https://segmentfault.com/a/1190000022812375

Recommandations de didacticiel associées :

Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!