如何将 JavaScript 数字拆分为单个数字?

javascriptweb developmentfront end technology

在本教程中,我们将学习如何将 JavaScript 数字拆分为单个数字。有时,我们需要将数字拆分为单个数字来完成交给我们的任务,例如检查回文数。让我们讨论将数字拆分为数字的方法。

  • 当数字以数字形式出现时。

  • 当数字以字符串形式出现时。

让我们通过程序示例分别讨论它们两者。

当输入为数字形式时

如果输入的数字是数字形式,我们可以简单地循环遍历该数字并使用Modulo(%)运算符将其各个数字分开。

算法

  • 步骤 1 - 在此步骤中,我们将获取一个必须拆分的数字。

  • 步骤 2 - 在第二步中,我们将定义一个函数,其中包含拆分逻辑数字的位数。

  • 步骤 3 − 在最后一步中,我们在上一步定义的函数中编写逻辑,以及在用户屏幕上输出结果的逻辑。

示例

以下示例将 JavaScript 数字拆分为单个数字 −

<!DOCTYPE html>
<html>
<body>
   <p id="result1">Input number: </p>
   <p id="result2">Individual Digits: </p>
   <script>
      const digits = [];
      function display(num) {
         while (num > 0) {
            let digit = num % 10;
            digits.push(digit);
            num = Math.floor(num / 10);
         }
         return digits;
      }
      let num = 20340921;
      document.getElementById("result1").innerHTML += num;
      document.getElementById("result2").innerHTML += display(num);
   </script>
</body>
</html>

在此示例中,我们将数字视为"20340921",然后通过使用 while 循环遍历每个数字并将每个数字存储在名为 digit 的变量中,将其拆分为单个数字。

当数字以字符串形式呈现时

在 JavaScript 中,我们可以使用两种不同的内置 JavaScript 方法来拆分数字字符串,然后将它们存储在变量中以便稍后显示在屏幕上。这两种方法都列在下面 -

  • 数组push() 方法

  • 字符串 split() 方法

使用 JavaScript 数组 push() 方法

在此方法中,我们将简单地将字符串数字的各个数字推送到数组中,然后将它们显示在屏幕上。

语法

以下是在 JavaScript 中使用 数组 push() 方法的语法 -

array.push();

让我们借助代码示例更好地理解它 -

算法

  • 步骤 1 - 在第一步中,我们将在文档中定义 input 标签以获取输入字符串数字。

  • 步骤 2 - 在下一步中,我们定义一个 JavaScript 函数,该函数使用 push() 方法从字符串中推送单个字符,这些字符将成为我们的各个数字。

  • 步骤 3 - 在此步骤中,我们将在上一步中定义的相同函数内编写逻辑以在用户屏幕上显示输出,因为它将由 click 事件调用。

示例

以下示例将说明push() 方法将数字拆分为单独的数字 −

<!DOCTYPE html>
<html>
<body>
   <h3>Split JavaScript Number into individual digits</h3>
   <label>Enter the number:</label><br>
   <input id="inp" type="number"><br><br>
   <button onclick="display()">click to Split</button>
   <p id="result">The individual digits of number are: </p>
   <script>
      let result = document.getElementById("result");
      function display() {
         let inp = document.getElementById("inp").value;
         let num = [];
         for (let i = 0; i < inp.length; i += 1) {
            num.push(inp.charAt(i));
         }
         result.innerHTML += "<br><b>" + num + "</b>";
      }
   </script>
</body>
</html>

在上面的例子中,我们在 input 标签中以字符串的形式获取输入,然后使用 push() 函数将字符串数字的各个字符逐个推送到 num 数组中,然后将其显示在屏幕上。

使用 JavaScript 字符串 split() 方法

JavaScript 中的 split 方法用于拆分字符串的各个字符

语法

string.split()

注意− 此示例的算法与上一个示例几乎相似;您只需将 push() 方法更改为 split() 方法即可。

示例

以下示例将解释 split() 方法拆分数字字符串的工作原理−

<!DOCTYPE html>
<html>
<body>
   <h3>Split JavaScript Number into individual digits</h3>
   <label>Enter the number:</label><br>
   <input id="inp" type= "number"><br><br>
   <button onclick="display()">click to Split</button>
   <p id="result">The individual digits of number are: </p>
   <script>
      let result = document.getElementById("result");
      function display() {
         let inp = document.getElementById("inp").value;
         let num = inp.split('');
         result.innerHTML += "<br><b>" + num + "</b>";
      }
   </script>
</body>
</html>

在上面的例子中,我们以数字字符串的形式从用户那里获取输入,然后使用内置的 JavaScript 方法 split() 将数字字符串拆分为单个数字字符,然后将它们显示在用户屏幕上。

在本教程中,我们了解了将数字拆分为单个数字的三种不同方法,其中数字可以是字符串或数字形式。我们可以使用这些方法将任何数字拆分为单个数字,然后使用这些数字根据检查数字或字符串的格式解决问题,例如检查数字是否是回文数。


相关文章