如何在 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() 方法，則建議使用第二種方法。

更新於：2023-09-06

63K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.