JavaScript numerical separator

The human eye takes a long time to parse large numerical literals, particularly if many repeated digits exist.

A new JavaScript programming feature allows underscores to be used as separators in numerical literals, which makes them easier to understand.

A JavaScript feature called numeric separators enables us to utilize underscore as a separator for the numeric literals.

For example, the number 10000 can be written as 10_000. Both Node.js and modern browsers' most recent iterations support the capability.

Syntax

The following syntax shows the numerical separator in JavaScript.

Examples

The examples show to operate numeric separators for binary, hexadecimal, and another type of values.

Example1:

The following example shows a basic numeric separator in javascript for simple values. We can use decimal and simple numeric values and separators. The separator can place any position of the number, and it does not affect the original 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 = 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 image shows actual values and numerical separator output.

Example 2:

The following example shows a numeric separator in javascript for numerical values. We can use big integers and binary values with the separator. The separator can place any index number of 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 image shows actual values and numerical separator output.

Example 3:

The following example shows a numeric separator in javascript for various numerical values. We can use octal and hexadecimal values with the separator. The separator can place any index number of 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 image shows actual values and numerical separator output.

Example 4:

The following example shows a numeric separator in JavaScript for numerical values. We can use big integers and binary values with the separator. The separator can place any index number of the input number. Here, we can use addition, subtraction, and multiplication of the 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 image shows actual values and numerical separator output.

Conclusion

JavaScript numeric separator is a visual operator to understand code and long values. It helps to understand complicated mathematical operations and displays large-size data.

Next TopicJavaScript prepend() method

← prev next →