Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
4K+ Views
