Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to split JavaScript Number into individual digits?
In this tutorial, we will learn how to split a JavaScript number into individual digits. This technique is useful for tasks like checking palindrome numbers, finding digit sums, or analyzing number patterns.
We'll explore three different approaches based on the input format:
Using modulo operator for numeric input
Using array push() method for string input
Using string split() method for string input
Method 1: Using Modulo Operator (Numeric Input)
When the input is a number, we can use the modulo (%) operator with division to extract digits from right to left.
Syntax
while (num > 0) {
let digit = num % 10; // Extract last digit
digits.push(digit);
num = Math.floor(num / 10); // Remove last digit
}
Example
<!DOCTYPE html>
<html>
<body>
<p id="result1">Input number: </p>
<p id="result2">Individual Digits: </p>
<script>
function splitNumberToDigits(num) {
const digits = [];
while (num > 0) {
let digit = num % 10;
digits.push(digit);
num = Math.floor(num / 10);
}
return digits.reverse(); // Reverse to get correct order
}
let num = 20340921;
let result = splitNumberToDigits(num);
document.getElementById("result1").innerHTML += num;
document.getElementById("result2").innerHTML += result.join(", ");
</script>
</body>
</html>
Note: This method extracts digits from right to left, so we reverse the array to maintain the original order.
Method 2: Using Array push() Method (String Input)
When the number is provided as a string, we can iterate through each character and push it into an array.
Example
<!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 are: </p>
<script>
function display() {
let inp = document.getElementById("inp").value;
let digits = [];
for (let i = 0; i < inp.length; i++) {
digits.push(inp.charAt(i));
}
document.getElementById("result").innerHTML =
"The individual digits are: <br><b>" + digits.join(", ") + "</b>";
}
</script>
</body>
</html>
Method 3: Using String split() Method (String Input)
The split() method provides the simplest approach for string-based numbers by splitting the string into an array of characters.
Syntax
string.split('') // Empty string splits into individual characters
Example
<!DOCTYPE html>
<html>
<body>
<h3>Split JavaScript Number using split() Method</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 are: </p>
<script>
function display() {
let inp = document.getElementById("inp").value;
let digits = inp.split('');
document.getElementById("result").innerHTML =
"The individual digits are: <br><b>" + digits.join(", ") + "</b>";
}
</script>
</body>
</html>
Comparison
| Method | Input Type | Performance | Complexity |
|---|---|---|---|
| Modulo Operator | Number | Fast | Medium |
| Array push() | String | Medium | Medium |
| String split() | String | Fast | Simple |
Conclusion
Use the modulo operator for numeric inputs and the split() method for string inputs as they offer the best performance. These techniques are essential for number manipulation tasks like palindrome checking and digit analysis.
4K+ Views
