如何在 JavaScript 数字中保留前导 0？

在本教程中，我们将学习如何在 JavaScript 数字中保留前导 0。

有时我们需要对类似于数字的字符串进行排序。例如，10 在字母表中位于 2 之前，但在 02 之后。前导零用于使数字的升序与字母顺序对齐。

以下是用于在 JavaScript 数字中保留前导零的方法。

将数字作为字符串使用

使用字符串操作将数字转换为字符串，并保留前导零。

语法

myFunc2('Neel', 27, '0165')

调用 myFunc2() 函数，并将值作为参数传递。id 被视为字符串，如上所示进行打印。

示例

在这个例子中，我们创建了两个表单。一个是员工 1，其年龄、姓名和 ID 号作为 myFunc1() 函数的参数；另一个是员工 2，其相同的姓名、年龄和 ID 号作为 myFunc2() 函数的输入。两个员工的 ID 号都包含一个带有前导零的数字。为了在本程序中保留前导零，该数字作为字符串输入。

<html>
<body>
   <p>Preserve leading 0 by converting the number to a string</p>
   <p id="root"></p>
   <form>
      <input type="button" onclick="myFunc1('Raghav', 26, '0186')" Value="Display Employee 1 Info">
   </form>
   <form>
      <input type="button" onclick="myFunc2('Neel', 27, '0165')" Value="Display Employee 2 Info">
   </form>
   <script>
      function myFunc1(name, age, id) {
         let root = document.getElementById("root");
         root.innerHTML = name + " is " + age + " years old, with id = " + id;
      }
      function myFunc2(name, age, id) {
         let root = document.getElementById("root");
         root.innerHTML = name + " is " + age + " years old, with id = " + id;
      }
   </script>
</body>
</html>

使用 padStart() 方法

在 JavaScript 中，padStart() 方法使用另一个字符串填充字符串，直到达到指定的长度。填充从字符串的左端开始应用。返回一个指定长度的字符串，以填充的字符串开头。

语法

String(num).padStart(5, "0");

这里，num 是需要保留前导零的数字。5 是数字的目标长度，“0”需要使用 padStart() 方法在前面填充。

示例

在这个例子中，我们看到有两个数字作为输入，并且根据用户给出的输入向数字添加零。指定目标长度，并将数字向左移动，在数字前面添加零。第一个数字的目标长度为五。在这种情况下，原始数字是三位数。在该数字前面添加两个零。第二个数字的目标长度为四。在其前面添加一个零，其他数字向左移动。

<html>
<body>
   <h3>Preserve leading 0 by using <i> padStart()</i>method</h3>
   <p>Click the buttons to call the functions:</p>
   <p id = "root"></p>
   <p>Output for "999" with "0":
      <span class = "output1" ></span>
   </p>
   <button onclick = "myFunc1()" >
      Click To see first number
   </button>
   <p> Output for "666" with "0":
      <span class = "output2" ></span>
   </p>
   <button onclick = "myFunc2()" >
      Click To see second number
   </button>
   </body>
   <script>
      function myFunc1() {
         num1 = 999;
         var1 = String(num1).padStart(5, "0");
         document.querySelector('.output1').textContent = var1;
      }
      function myFunc2() {
         num2 = 666;
         var2 = String(num2).padStart(4, "0");
         document.querySelector('.output2').textContent = var2;
      }
   </script>
</html>

在本教程中，我们学习了如何在 JavaScript 数字中保留前导零。第一种方法是将数字更改为字符串。第二种方法是在前面用零填充数字。

更新于：2022年10月20日

4K+ 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告