Teach with us

How to split JavaScript Number into individual digits?

In this tutorial, we will learn how we can split a JavaScript number into individual digits. Sometimes, we need to split the number into individual digits to accomplish the task given to us like checking for the palindrome number. Let us discuss the methods to split numbers into digits.

  • When the number is taken in the form of a number.

  • When the number is taken in the form of a string.

Let us discuss both of them individually with program examples.

When the input is in form of a number

If the input number is in the form of a number, we can simply loop through the number and separate its individual digits using the Modulo(%) operator.

Algorithm

  • Step 1 − In this step, we will take a number that has to be split.

  • Step 2 − In the second step, we will define a function that contains the logic to split the digits of the number.

  • Step 3 − In the last step, we write the logic inside the function defined in the previous step and also the logic to output the result on the user screen.

Example

The below example will split the JavaScript number into individual digits −

<!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>

In this example, we considered a number as "20340921" which is then split into individual digits by traversing each digit using the while loop and storing each digit in a variable named digit.

When the number is taken in form of a string

In JavaScript, we can use the two different built−in JavaScript methods to split the string of numbers and then store them in a variable to display later on the screen. Both of these methods are listed below −

  • Array push() method

  • String split() method

Using JavaScript Array push() Method

In this method, we will simply push the individual digits of the string number in the array and then display them on the screen.

Syntax

Following is the syntax of using the array push() method in JavaScript −

array.push();

Let us understand it better with the help of a code example −

Algorithm

  • Step 1 − In the first step, we will define the input tag in the document to take the input string number.

  • Step 2 − In the next step, we define a JavaScript function that uses the push() method to push the individual characters from the string that will be our individual digits.

  • Step 3 − In this step, we will write the logic to display the output on the user screen inside the same function defined in the previous step as it will be called by the click event.

Example

The below example will illustrate the use of the push() method to split the number into individual digits −

<!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>

In the above example, we take the input in form of string inside the input tag and then used the push() function to push the individual characters of the string number inside the num array one by one and then display it on the screen.

Using JavaScript String split() Method

The split method in JavaScript is used to split the individual characters of the string

Syntax

string.split()

NOTE − The algorithm of this example is almost similar to the previous example; you just need to change the push() method into the split() method.

Example

The below example will explain the working of the split() method to split the string of numbers −

<!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>

In the above example, we have taken input from the user in the form of a number string and then use the built-in JavaScript method split() for strings to split the number string into individual digit characters and then display them on the user screen.

In this tutorial, we learned about the three different methods for splitting a number into individual digits, where the number can either be in string or number form. We can use these methods to split any number into its individual digits and then use those digits to solve the problems based on checking the format of the number or the string like checking for a number whether it is a palindrome number or not.

Updated on 25-Nov-2022 08:22:16

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements