从多个方面详解leftpad函数的使用

发布时间：2023-05-20

一、leftpad的概念和背景

leftpad是一个JavaScript中常用的字符串填充函数，可以在字符串前面添加指定数量的填充字符。leftpad最早是由GitHub上的一个开源Node.js模块库lodash的作者发起的，在其官方发布后，迅速流行起来，成为了前端开发中不可或缺的工具之一。 leftpad之所以流行，是因为它解决了一个细节问题：字符串的数字排列。当我们需要输出一个固定位数的数字，而数量不够时，为了使其位数相同，经常会在数字前面添加0或其他符号。leftpad的出现将这个问题解决得特别完美，成为了老少皆宜的工具。

二、leftpad的用法和实现

leftpad的语法非常简单：

leftpad(str, length [, ch])

其中，str表示要填充字符的原始字符串，length表示所需的总长度，ch则是可选的填充字符，默认为空格。 leftpad的实现方法也比较简单，可以使用数组的join函数，将指定长度的字符串与填充字符拼接起来，并通过字符串的slice函数截取所需长度的部分：

function leftpad(str, length, ch) {
  let len = length - str.length;
  let padStr = new Array(len + 1).join(ch);
  return padStr + str;
}

上述代码首先计算所需填充的字符数，然后创建一个由指定填充字符构成的字符串数组，并将其通过join函数拼接为字符串，最后将其与原字符串拼接并返回。需要注意的是，因为数组从0开始，所以长度需要加1。

三、leftpad的常见应用场景

1. 格式化数字

leftpad非常适合在数字前面添加指定数量的填充符号，横向对齐数字。例如，当我们需要输出一个千位分割的数字时，可以使用leftpad对其进行格式化：

let num = 1000;
let formattedNum = leftpad(num.toString(), 8, '0');
console.log(formattedNum);  //输出："00001000"

通过将数字转换为字符串，使用leftpad填充0，可以将其格式化为8位长度的数字。

2. 对齐文本

在表格等布局中，为了使文本对齐，经常需要在文本前面添加填充符号。使用leftpad可以快速实现这一过程。例如，下面的代码可以在字符串中添加指定数量的空格，以使其对齐：

let data = ['foo', 'bar', 'baz'];
let maxLen = Math.max(...data.map(str => str.length));  
data = data.map(str => leftpad(str, maxLen));
console.log(data.join('\n'));  
//输出：
//   foo
//   bar
//   baz

通过先算出最长的字符串长度，然后将每个字符串都用leftpad进行填充，最后用“\n”拼接并输出。

3. 前导零

leftpad不仅可以用于格式化数字，还可以用于生成前导零字符串。例如，当我们需要生成一段长度固定的随机字符时，可以使用leftpad实现：

function randomStr(len) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let str = '';
  for (let i = 0; i < len; i++) {
    let c = chars.charAt(Math.floor(Math.random() * chars.length));
    str += c;
  }
  return str;
}
let str = randomStr(6);
let paddedStr = leftpad(str, 8, '0');
console.log(paddedStr);  //输出："00eG06G3"

使用随机字符生成函数生成一个长度为6的字符，再使用leftpad函数将其用“0”填充到长度为8。这种方式可以通过批量生成相同长度的带前导零字符串，用于随机ID或密码生成等领域。

推荐文章