JavaScript 字符串中的 pad 方法！

ES2017 引入了字符串补全长度的字符功能。如果某个字符串不够指定长度，串中会在头部或尾部补全。字符padStart()用于头部补全，串中padEnd()用于尾部补全 。字符

const string = hi;  string.padStart(3,串中 c); // "chi"  string.padEnd(4, l); // "hill" 

语法

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

了解参数

padEnd和padStart接受相同的参数。

1. maxLength

最终字符串的字符长度。

const result = string.padStart(5);  result.length; // 5 

当我看到这个时，串中也花了我一段时间来学习。字符我一直以为maxLength是串中重复填充字符串参数的次数。所以这里只想强调一下此参数是字符当前字符串需要填充到的目标长度，不是串中填充字符串重复的次数。如果这个数值小于当前字符串的字符长度，则返回当前字符串本身。串中

当然，字符我相信读者比我聪明多了，所以我确定你没有这种困惑 😆

2. padString

padString 表示填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的云南idc服务商部分，其他部分会被截断。此参数的默认值是一个空格 " "(U+0020。

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

如果你传入的是一个空字符串，那么什么都不会填充。

const result = hi.padStart(5, ); result; // "hi" result.length; // 2 

如何处理其他数据类型

对于第二个参数padString，它接受一个string。如果我们试图给它传入其他数据类型。它会调用 toString方法强制转成一个字符串。我们来看看在不同的值类型上使用toString会发生什么。

// 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] 

有了这些知识，我们看看是否可以将这些其他值类型传递给padStart(padEnd具有相同的行为)。

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 

处理 undefined

这里有一个有趣的例子，如果你强制把 undefined 转成一个字符串，得到一个TypeError：

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

但当我们把undefined作为第二个参数传入padStart，会得到这个：

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

所以上面说的 padString 参数会使用 toString 强制转成字符串使用，到这里感觉又不对了 🙊。我们先来看下规范：

ECMAScript 规范 :如果填充的字符串是 undefined，该填充的源码下载字符串就会被规制成空格( 0x0020)。

好吧，我们更正一下， 除了undefined，否则传递的所有其他数据类型都将使用toString强制转成字符串。

如果 padString 超过 maxLength 怎么办?

如果 maxLength 数值小于等于当前字符串的长度，则返回当前字符串本身。

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

如果 maxLength 小于 padString 的长度，则 padString 会被截断。

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

padStart/padEnd vs padLeft/padRight

trim 方法具有的别名。

trimLeft是trimStart的别名 trimRight 是 trimStart的别名

但是对于字符串填充方法，没有别名。因此，请勿使用padLeft和padRight，它们不存在。这也是建议你不要使用trim别名的原因，这样让代码库中具有一致性 😄

实战用事

使用 padStart 让字符串右对齐：

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

得到的结果：

JavaScript       HTML        CSS        Vue 

数字打码：

const bankNumber = 2222 2222 2222 2222; const last4Digits = bankNumber.slice(-4); last4Digits.padStart(bankNumber.length, *); //