如何在JavaScript中使用前导零填充数字？

在本教程中，我们将学习如何在JavaScript中使用前导零填充数字。

在JavaScript中，可以使用不同的方式进行数字填充。在本教程中，我们将介绍最常见的两种方法：

使用String padStart() 方法
使用Array对象的构造函数和 join() 方法

使用String padStart()方法

在 JavaScript 中，String对象的 padStart() 方法可用于在数字前面填充前导零。它接受两个参数，第一个参数为目标或期望字符串的总长度，第二个参数为用户想要用于填充的 字符串 或字符。用户想要填充的数字必须首先转换为字符串以使用此方法。

用户可以按照以下语法使用 padStart() 方法在JavaScript中填充带有前导零的数字。

语法

let number = 2
let result = number.toString().padStart(5, '0')
console.log(result); // 00002

在上述语法中，padStart()方法将5作为目标字符串长度，并且”0″是用于填充数字的字符串或字符。

参数

目标长度 −它接受目标字符串的长度。
填充字符串 −它是用于执行填充的字符串。

返回类型

带有填充字符串的目标长度的字符串。

示例

在下面的示例中，我们使用了padStart()方法来用前导零填充数字。我们使用了一个按钮点击事件来进行填充数字。

<html>
<body>
   <h3>
      Padding a number with leading zeros in JavaScript using
   <i> padStart() </i> method </h3>
   <h4> Pad the number 12 with leading zeros and the total length should be 5 </h4>
   <button onclick = "padNumber()"> Pad Number </button>
   <h4 id = "root"> </h4>
   <script>
      let root = document.getElementById('root')
      let number = 12
      function padNumber(){
         let result = number.toString().padStart(5, '0')
         root.innerHTML = "Result: " + result
      }
   </script>
</body>
</html>

使用Array对象的构造函数和join()方法

这是一种填充数字的替代方法。在这种方法中，我们使用JavaScript的 Array对象构造函数生成与填充数字所需的零相同数量的元素的数组。然后，我们使用“0”连接它们以生成填充字符串，并将其添加到数字上。

语法

let number = 24
let strNumber = number.toString()
let targeted_length = 5
let result = ''
// padding zeros
if(strNumber.length < targeted_length){
   let padding = new Array(targeted_length - strNumber.length +
   1).join('0')
   result = padding + strNumber
}else{
   result = strNumber
}

在上述语法中，“result”变量存储了以零开头的填充数字的值。

算法

步骤1 - 声明一个变量，存储数字的字符串，并声明目标字符串的长度

步骤2 - 如果数字字符串的长度小于目标长度，则

步骤2.1 - 使用Array对象构造函数创建长度为目标长度-字符串数字的长度+1的数组，并使用字符“0”使用join()方法将数组元素连接起来。它将成为填充后的字符串。

步骤2.2 - 连接填充后的字符串和数字。这将是结果。

步骤3 - 如果数字字符串的长度不小于目标长度，则数字不需要任何填充。

示例

在下面的示例中，我们使用了Array对象构造函数和join()方法来用前导零填充数字。我们使用了按钮点击事件来填充数字。

<html>
<body>
   <h3>
   Padding a number with leading zeros in JavaScript using
   <i> Array object constructor and join() </i> method </h3>
   <h4> Pad the number 24 with leading zeros and the total length should be 5 </h4>
   <button onclick = "padNumber()"> Pad Number </button>
   <h4 id = "root"> </h4>
   <script>
      let root = document.getElementById('root')
      let number = 24
      let targeted_length = 5
      function padNumber(){
         let strNumber = number.toString()
         if(strNumber.length < targeted_length){
            let padding = new Array(targeted_length - strNumber.length +
            1).join('0')
            let result = padding + strNumber
            root.innerHTML = "Result: " + result
         }
      }
   </script>
</body>
</html>

我们已经学会了如何在JavaScript中使用两种不同的方法在数字前面添加0。第一种方法使用了字符串的 padStart() 方法，这也是推荐的方法。第二种方法使用了数组对象的构造函数和join方法来进行填充。第一种方法是标准的方法，如果用户不想使用字符串的 padStart() 方法，则推荐使用第二种方法。