JavaScript 中的 padEnd 字符串方法

使用 `\n` 函数padEnd，它会在字符串末尾添加字符，使其达到指定的长度。这对于我们添加一些填充，以便以表格格式显示字符串非常有用。这样是不是更容易阅读了，太棒了🍹

// Display String in Tabular Format with padEnd

// ❌
'Day: Monday' + 'Drink: 🍵'
'Day: Saturday' + 'Drink: 🍹'

// ✅
'Day: Monday'.padEnd(20) + 'Drink: 🍵'
'Day: Saturday'.padEnd(20) + 'Drink: 🍹'

padEnd 参数

它padEnd接受 2 个参数：

string.padEnd( <length>, <character>)

第一个参数：长度

这是结果字符串的最终长度。此项为必填项。

假设你有一个包含 3 个字符的字符串，并将长度设置为 5 个字符。这意味着，程序padEnd会用 2 个字符填充它，使总长度达到你设定的 5 个字符的目标长度。

举个例子。我用 表示空格字符，·向你展示填充空格。

'abc'.padEnd(5);

// abc··

第二个参数：字符

这是一个可选参数。如您所见，默认的填充字符是空格。但是，您可能希望使用其他字符进行填充。没问题！只需在此处传递即可。

'hi'.padEnd(10, '!');

// 'hi!!!!!!!!'

表格格式仅适用于等宽字体。

所以，在我的示例中，我用它padEnd来创建表格格式的字符串。需要注意的是，它仅适用于等宽字体。

等宽字体，也称为等距字体、等宽字体或非比例字体，是一种字母和字符各自占据相同水平空间的字体。

维基百科

作者：Garethlwalt -自行创作，CC BY 3.0，链接

像“Roboto”或“Monaco”这样的字体是等宽字体，这意味着每个字符的宽度都相同。而像“Times New Roman”这样的字体则不是等宽字体，它们是比例字体，因此每个字符的宽度都不同。由于每个字符的宽度不同，因此很难使用等宽字体创建表格格式padEnd。

padEnd 与 padStart

字符串填充的目的是向字符串添加字符，使结果具有特定的长度。

padEnd在字符串末尾添加字符。而padStart向字符串开头添加字符。

padEnd

'hello '.padEnd(10, '👋');

// 'hello 👋👋'

padStart

' hello'.padStart(10, '👋');

// '👋👋 hello '

注意！结束语是表情符号

如果你使用表情符号填充内容，可能会遇到这个问题。

'hello '.padEnd(11, '👋');

// 'hello 👋👋�'

注意最后一个“👋”没有显示出来，而是显示成了“�”。这是因为表情符号通常由两个字符组成。

'👋'.length === 2 // true

所以，如果你要用表情符号填充内容，请注意，如果表情符号的长度不够，可能会被截断。

社区意见

• @2alin：补充一点：要使用表格样式，字体应该是等宽字体，HTML渲染会移除任何多余的空格；这使得此类应用主要适用于在终端显示信息的情况。

• @Cilly_Boloe： padEnd 和 padStart 示例 →链接

资源

• MDN Web 文档：String.prototype.padEnd()
• 学习 JavaScript ES 2017：字符串填充——padStart 和 padEnd
• 探索 JavaScript：字符串填充
• Flaviocopes：字符串 padEnd 方法
• 使用 padStart 和 padEnd 进行字符串填充
• 鳄鱼：JavaScript 中的 padStart 和 padEnd 字符串方法
• tc39：ECMAScript 规范中关于 String.prototype.{padStart,padEnd} 的提案

感谢阅读❤
欢迎关注！Instagram | Twitter | Facebook |博客| SamanthaMing.com