如何使用 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 是数字的目标长度，并且需要使用 padStart() 方法在前面填充“0”。

示例

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

<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+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.