详解JavaScript中的padStart()和padEnd()方法-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

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 表示填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值是一个空格 " "（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]'