Explication détaillée des méthodes padStart() et padEnd() en JavaScript

ES2017 introduit la fonction de longueur de complétion de chaîne. Si une corde n’est pas assez longue, elle sera complétée au niveau de la tête ou de la queue. padStart() est utilisé pour la complétion de la tête. ，padEnd() est utilisé pour la complétion de la queue.

const string = 'hi';

string.padStart(3, 'c'); // "chi"

string.padEnd(4, 'l'); // "hill"

Syntaxe

string.padStart(<maxLength>, <padString>)

string.padEnd(<maxLength>, <padString>)

Comprendre les paramètres

padEnd et padStart acceptent les mêmes paramètres.

1. maxLength

La longueur de la chaîne finale.

const result = string.padStart(5);

result.length; // 5

Quand j'ai vu ça, il m'a aussi fallu du temps pour apprendre. J'ai toujours pensé que maxLength était le nombre de fois que le paramètre de chaîne était rempli à plusieurs reprises. Alors ici, je veux juste 强调一下Ce paramètre est 当前字符串需要填充到的目标长度，不是填充字符串重复的次数. Si cette valeur est inférieure à la longueur de la chaîne actuelle, la chaîne actuelle elle-même est renvoyée.

Bien sûr, je pense que les lecteurs sont beaucoup plus intelligents que moi, donc je suis sûr que vous n'avez pas cette confusion ??

padString

padString représente une chaîne de remplissage. Si la chaîne est trop longue et que la longueur de la chaîne complétée dépasse la longueur cible, seule la partie la plus à gauche est conservée et les autres parties sont tronquées. La valeur par défaut de ce paramètre est un espace " " (U+0020.

'hi'.padStart(5);

// 等价于
'hi'.padStart(5, ' ');

Si vous passez une chaîne vide, rien ne sera rempli. Comment gérer

const result = 'hi'.padStart(5, '');

result; // "hi"
result.length; // 2

Autres données types

Pour le deuxième paramètre padString, il accepte un string Si nous essayons de le passer dans d'autres types de données, il appellera la méthode toString pour forcer sa conversion en chaîne. . Voyons ce qui se passe lorsque nous utilisons toString sur différents types de valeur

// Number
(100).toString(); // '100'

// Boolean
true.toString();   // 'true'
false.toString();  // 'false'

// Array
['A'].toString(); // 'A'
[''].toString();  // ''

// Object
({}).toString();         // '[object Object]'
({hi: 'hi'}).toString(); // '[object Object]'

Avec cette connaissance, voyons si nous pouvons transmettre ces autres types de valeur à padStart (padEnd a le même comportement).

'SAM'.padStart(8, 100);    // '10010SAM'

'SAM'.padStart(8, true);   // 'truetSAM'
'SAM'.padStart(8, false);  // 'falseSAM'

'SAM'.padStart(5, ['']);   // 'SAM'
'SAM'.padStart(5, ['hi']); // 'hiSAM'

'SAM'.padStart(18, {});         // '[object Object]SAM'
'SAM'.padStart(18, {hi: 'hi'}); // '[object Object]SAM'

poignées undefined

Voici un exemple intéressant si l'on force undefined à Pour une chaîne, on obtient un TypeError :

undefined.toString(); // TypeError: Cannot read property 'toString' of undefined

, mais quand on passe undefined comme deuxième paramètre à padStart, on obtient ceci :

'SAM'.padStart(10, undefined);
// '       SAM'

Donc ce qui est dit plus haut Le paramètre padString sera forcé à être converti en chaîne en utilisant toString, mais cela semble encore faux ??. Jetons d'abord un coup d'œil à la spécification :

Spécification ECMAScript  : Si remplie La chaîne est undefined , et la chaîne remplie sera normalisée en espaces (0x0020)

Eh bien, corrigeons cela, à l'exception de undefined, sinon tous les autres types de données transmis seront utilisés toString Forcés de se convertir en chaîne. .

Et si padString dépasse maxLength ?

Si la valeur maxLength est inférieure ou égale à la longueur de la chaîne actuelle, renvoie la chaîne actuelle elle-même >

'hi'.padEnd(2, 'SAM');
// 'hi'

If.

est inférieur à la longueur de maxLength, alors padString sera tronqué padString

'hi'.padEnd(7, 'SAMANTHA');
// 'hiSAMAN'

padStart/padEnd vs padLeft/padRight

a trim.

• est un alias pour trimLeft trimStart
• est un alias pour trimRight trimStart

mais pour la méthode de remplissage de chaîne, il existe pas d'alias. Par conséquent, n'utilisez pas

et padLeft, ils n'existent pas. C'est pourquoi il est recommandé de ne pas utiliser l'alias padRight, afin qu'il y ait une cohérence dans la base de code ??trim

Utilisation pratique

Utilisez padStart pour aligner à droite la chaîne

console.log('JavaScript'.padStart(15));
console.log('HTML'.padStart(15));
console.log('CSS'.padStart(15));
console.log('Vue'.padStart(15));

Le résultat obtenu

     JavaScript
           HTML
            CSS
            Vue

Codage numérique

const bankNumber = '2222 2222 2222 2222';
const last4Digits = bankNumber.slice(-4);

last4Digits.padStart(bankNumber.length, '*');
// ***************2222

Prise en charge du navigateur

et padStart ont été introduits en même temps, ils partagent donc un support de navigateur similaire À l'exception d'IE, les deux peuvent être utilisés ??padEnd

Adresse originale : https : //dmitripavlutin.com/replace-all-string-occurrences-javascript/

Auteur : Dmitri Pavlutin

Adresse de traduction : https://segmentfault.com/a/1190000023721944

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

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!