如何在 JavaScript 中用前导零填充数字？
在本教程中，我们将学习如何在 JavaScript 中用前导零填充数字。
在 JavaScript 中，可以用不同的方式填充数字。在本教程中，我们将看到两种最流行的方法 -
- 使用 String padStart() 方法
- 使用 Array 对象构造函数和 join() 方法
使用 String padStart() 方法
在 JavaScript 中，String 对象的 padStart() 方法可用于用前导零填充数字。它需要两个参数，第一个参数是目标或所需字符串的总长度，另一个参数是用户想要用于填充的字符串或字符。要使用此方法，必须先将用户想要填充的数字转换为字符串。
用户可以按照以下语法，使用 JavaScript 中的 padStart() 方法用前导零填充数字。
语法
let number = 2 let result = number.toString().padStart(5, '0') console.log(result); // 00002
在上述语法中，padStart() 方法以 5 作为目标字符串长度，而"0"是应填充数字的字符串或字符。
参数
- 目标长度 - 它需要目标字符串的长度。
- 填充字符串 - 它是将执行填充的字符串。
返回类型
- 用填充字符串填充的目标长度的字符串。
示例
在下面给出的示例中，我们使用了 String 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>
使用数组对象构造函数和 join() 方法
这是填充数字的另一种方法。在这种方法中，我们使用 JavaScript 的数组对象构造函数创建一个具有与所需零相同的元素数量的数组来填充数字。然后我们将其与"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，并使用 join() 方法将数组元素与字符"0"连接起来。它将成为填充的字符串。
步骤 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 中用前导零填充数字。第一种方法使用 String padStart() 方法，这也是推荐的方法。第二种方法使用 Array 对象构造函数和 join 方法进行填充。第一种方法是标准方法，如果用户不想使用 String padStart() 方法，则建议使用第二种方法。
