如何使用 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.