The human eye requires an extended period to interpret substantial numerical literals, especially when there are numerous instances of repeated digits.
A recently introduced feature in JavaScript enables the use of underscores as delimiters within numerical literals, enhancing their readability.
A feature in JavaScript known as numeric separators allows the use of underscores as delimiters in numeric literals.
For instance, the numeral 10000 can also be represented as 10_000. This functionality is supported by both the latest versions of Node.js and contemporary web browsers.
Syntax
The syntax presented below illustrates the use of numerical separators in JavaScript.
var first_var = 10_000;
Examples
The illustrations demonstrate how to utilize numeric separators for binary, hexadecimal, and various other value types.
Example1:
The subsequent illustration demonstrates a fundamental numeric separator in JavaScript for straightforward values. We are able to utilize decimal numbers along with basic numeric values and separators. The separator can be positioned at any location within the number, and it will not impact the original numeric value.
<!DOCTYPE html>
<html>
<head>
<title> Numeric Separators in JavaScript </title>
</head>
<body>
<h3> Numeric Separators in JavaScript </h3>
<button type = "button" onclick = "clickHere();"> Click Here. </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<p id = "value4"> </p>
<script>
function clickHere(){
var value1 = 12_000;
document.getElementById('value1').innerHTML = value1;
var value2 = 0.0_00_001;
document.getElementById('value2').innerHTML = value2;
var value3 = 151_632_263.85;
document.getElementById('value3').innerHTML = value3;
var value4 = 12_456_983;
document.getElementById('value4').innerHTML = value4;
}
</script>
</body>
</html>
Output
The illustration displays real values alongside the results produced by the numerical separator.
Example 2:
The subsequent example demonstrates the use of a numeric separator in JavaScript for representing numerical values. This feature allows us to utilize big integers as well as binary values alongside the separator. The separator can be positioned at any index within the input number.
<!DOCTYPE html>
<html>
<head>
<title> Numeric Separators in JavaScript </title>
</head>
<body>
<h3> Numeric Separators in JavaScript </h3>
<button type = "button" onclick = "clickHere();"> Click Here. </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<p id = "value4"> </p>
<script>
function clickHere(){
var value1 = 8_263_254_916_724_995_107n;
document.getElementById('value1').innerHTML = value1;
var value2 = 0b1011_0100_0001;
document.getElementById('value2').innerHTML = value2;
var value3 = 8_263_254_916_724_995_1.07;
document.getElementById('value3').innerHTML = value3;
var value4 = 0b1111_0111_0001;
document.getElementById('value4').innerHTML = value4;
}
</script>
</body>
</html>
Output
The illustration displays real values alongside the results from the numerical separator.
Example 3:
The subsequent example illustrates the use of a numeric separator in JavaScript for different numerical representations. It is possible to utilize both octal and hexadecimal values alongside the separator. This separator can be positioned at any index within the input number.
<!DOCTYPE html>
<html>
<head>
<title> Numeric Separators in JavaScript </title>
</head>
<body>
<h3> Numeric Separators in JavaScript </h3>
<button type = "button" onclick = "clickHere();"> Click Here. </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<p id = "value4"> </p>
<script>
function clickHere(){
var value1 = 0o124_670;
document.getElementById('value1').innerHTML = value1;
var value2 = 0o34_56;
document.getElementById('value2').innerHTML = value2;
var value3 = 0xB0_D0_F0;
document.getElementById('value3').innerHTML = value3;
var value4 = 0xC0_A0_F0;
document.getElementById('value4').innerHTML = value4;
}
</script>
</body>
</html>
Output
The visual representation displays the real values alongside the output from the numerical separator.
Example 4:
The example below illustrates the use of a numeric separator in JavaScript for representing numerical values. This feature allows the incorporation of big integers as well as binary values with the separator. The separator can be positioned at any index within the input number. In this context, we can perform operations such as addition, subtraction, and multiplication on these values.
<!DOCTYPE html>
<html>
<head>
<title> Numeric Separators in JavaScript </title>
</head>
<body>
<h3> Numeric Separators in JavaScript </h3>
<button type = "button" onclick = "clickHere();"> Click Here. </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<p id = "value4"> </p>
<p id = "value5"> </p>
<script>
function clickHere(){
var value1 = 12_000;
var value2 = 0.1_001;
var value3 = 151_632_263.85;
var value4 = 12_456_983;
//addition operation
var add = value1 + value2;
document.getElementById('value1').innerHTML = add;
//Subtraction operation
var sub = value1 - value2;
document.getElementById('value2').innerHTML = sub;
//multiplication operation
var mul = value2 * value3;
document.getElementById('value3').innerHTML = mul;
//division operation
var divs = value4 / value1;
document.getElementById('value4').innerHTML = divs;
//modulus operation
var mods = value4 % value1;
document.getElementById('value5').innerHTML = mods;
}
</script>
</body>
</html>
Output
The illustration displays real values alongside the output generated by the numerical separator.
Conclusion
The numeric separator in JavaScript serves as a visual tool designed to enhance the readability of code and extensive numerical values. It assists in comprehending complex mathematical calculations and presents large data sets in a more understandable manner.