Using numeric separators for better readability in vanilla JS

This week, we’ve looked at how to format numbers into strings, and how to format numbers as currency.
Today, we’re going to wrap things up by looking at a simple trick for making big numbers easier to read in your code with the numeric separator.
Let’s imagine you have a really big number, like this.
let num = 1234567890987654321; Because it’s a number and not a string, you can’t add commas (or dots, depending on where you live) as “thousands” indicators.


This content originally appeared on Go Make Things and was authored by Go Make Things

This week, we’ve looked at how to format numbers into strings, and how to format numbers as currency.

Today, we’re going to wrap things up by looking at a simple trick for making big numbers easier to read in your code with the numeric separator.

Let’s imagine you have a really big number, like this.

let num = 1234567890987654321;

Because it’s a number and not a string, you can’t add commas (or dots, depending on where you live) as “thousands” indicators.

// THIS THROWS AN ERROR
let num = 1,234,567,890,987,654,321;

However, modern JavaScript gives us the numeric seperator, an underscore (_) placed between numeric characters in a number to make it easier to read.

let num = 1_234_567_890_987_654_321;

Numeric separators make big numbers easier to read, but are ignored by all of the Number object functions and operators.

For example, you could still do something like this.

// returns 1234567890.9876544
let smallNum = num / 1_000_000_000;

☀️😎 Almost Summer Sale! This week only, get 30% off all of my Vanilla JS courses, books, and bundles.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2022-06-03T14:30:00+00:00) Using numeric separators for better readability in vanilla JS. Retrieved from https://www.scien.cx/2022/06/03/using-numeric-separators-for-better-readability-in-vanilla-js/

MLA
" » Using numeric separators for better readability in vanilla JS." Go Make Things | Sciencx - Friday June 3, 2022, https://www.scien.cx/2022/06/03/using-numeric-separators-for-better-readability-in-vanilla-js/
HARVARD
Go Make Things | Sciencx Friday June 3, 2022 » Using numeric separators for better readability in vanilla JS., viewed ,<https://www.scien.cx/2022/06/03/using-numeric-separators-for-better-readability-in-vanilla-js/>
VANCOUVER
Go Make Things | Sciencx - » Using numeric separators for better readability in vanilla JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/03/using-numeric-separators-for-better-readability-in-vanilla-js/
CHICAGO
" » Using numeric separators for better readability in vanilla JS." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2022/06/03/using-numeric-separators-for-better-readability-in-vanilla-js/
IEEE
" » Using numeric separators for better readability in vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2022/06/03/using-numeric-separators-for-better-readability-in-vanilla-js/. [Accessed: ]
rf:citation
» Using numeric separators for better readability in vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2022/06/03/using-numeric-separators-for-better-readability-in-vanilla-js/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.