如何在 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+ 次瀏覽

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.