如何在 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”是用于填充数字的字符串或字符。
参数
- 目标长度 - 它获取目标字符串的长度。
- 填充字符串 - 这是执行填充的字符串。
返回类型
- 一个使用填充字符串填充到目标长度的字符串。
示例
在下面给出的示例中,我们使用了 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>
使用 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 的数组,并使用 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() 方法,则建议使用第二种方法。
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP