带前导零的 JavaScript 填充数字

在 JavaScript 中，我们经常需要格式化数字，更具体地说，是填充数字。其中一种填充数字的方式是在数字前面加 0，这就是所谓的带前导零的数字。例如，数字 5 可以被填充成 05 或 005，依此类推。

这篇文章将会探索在 JavaScript 中如何实现带前导零的数字，包括使用内置函数、使用正则表达式等方式。同时，我们也将讨论其中的优缺点，以及如何选择最适合你的情况的方案。

方法一：使用内置函数 padStart()

ES6 中提供了内置函数 padStart()，这个函数可以用来将字符串填充到一定的长度。

const num = 5;
const paddedNum = num.toString().padStart(2, '0');
console.log(paddedNum); // "05"

在这个例子中，我们将数字 5 转换成字符串，并通过 padStart() 函数将字符串填充到长度为 2，我们用字符 0 进行填充。结果是 "05"，符合预期的结果。

使用 padStart() 函数的一个不足之处是，在一些旧版本的浏览器上可能会出现兼容性问题。因此，如果你需要兼容旧版本的浏览器，你可能需要寻找其他解决方案。

方法二：使用正则表达式

使用正则表达式也是一种常见的实现方法。这里我们使用一个非常简单的正则表达式来完成：

const num = 5;
const paddedNum = ('00' + num).substr(-2);
console.log(paddedNum); // "05"

在这个例子中，我们将数字 5 和字符串 '00' 连接在一起。之后，我们使用 substr() 函数截取从字符串末尾开始的两个字符。因此，最终结果是 "05"。

使用正则表达式这种方法与 padStart() 方法相比有一些不同之处。例如，正则表达式的效率可能会稍微低一些。但是，这种方法对于一些旧版本的浏览器也能够很好地兼容。

方法三：创建自定义函数

最后，你也可以创建自己的函数来实现带前导零的数字。下面是一个可能的实现：

function pad(num, size) {
  let s = num + "";
  while (s.length < size) s = "0" + s;
  return s;
}

const num = 5;
const paddedNum = pad(num, 2);
console.log(paddedNum); // "05"

在这个函数中，我们首先将数字和一个空字符串相加来将其转换为字符串。之后，我们使用一个 while() 循环来重复将字符 0 拼接到字符串前面，直到字符串长度达到指定的大小。最后，我们返回拼接后的字符串作为结果。

使用自定义函数可以给我们更多的灵活性。例如，我们可以根据需要调整填充字符，甚至对不同长度的数字使用不同的填充字符。

总结

在 JavaScript 中实现带前导零的数字有多种方式，包括内置函数、正则表达式和自定义函数。在选择最适合你的方案时，需要注意浏览器的兼容性和效率等因素。希望这篇文章能够为你提供有用的指导。