Vive les séparateurs numériques !
Par Delicious Insights • Publié le 12 mai 2020

Cet article est également disponible en anglais.

Voici le neuvième article de notre série quotidienne « 19 pépites de JS pur ». Aujourd’hui nous parlons d’une extension syntaxique pour les littéraux numériques qui amène enfin dans JavaScript un petit élément de confort que de nombreux autres langages proposaient déjà : la découpe visuelle des valeurs pour en repérer plus facilement les composantes ou l’échelle de grandeur.

Dans la série…

Extrait de la liste des articles :

  1. Inverser deux valeurs avec la déstructuration
  2. Retirer facilement les « valeurs vides » d’un tableau
  3. Vive les séparateurs numériques ! (cet article)
  4. Trier proprement des textes
  5. Extraire les emojis d’un texte
  6. …au-delà, c’est la surprise ! (mais la liste est déjà calée)…

Le problème

Ça se passe de commentaire :

const TURNS = 10000000000 // 10 millions ? 100 ? 1 milliard ? Plus ?
const MASK = 0b10110110 // 8 bits, plus, moins ? Le 1er quad vaut quoi ?
const FEE = 1500 // 1500 € ? 15 ? 1,5 ? Y’a-t-il une virgule fixe ?
const FLAT_RATE = 250000 // 250 000 ou 2 500 (2 500,00) car en cents ?

La solution

De nombreux langages ont adopté le séparateur numérique _ (underscore) dans leurs littéraux numériques. Note bien que le séparateur ne change strictement rien à la valeur finale, il est juste là pour plus de lisibilité du code source, avec peu ou prou les mêmes contraintes de bon sens que dans les autres langages le proposant :

  • Pas en début ou en fin de littéral (let n = _10_ : non, deux fois non !)
  • Pas en fin de partie entière ni en début de partie flottante ou exposant dans un littéral flottant (let n = 5_._0e_10 : non, non et non !)
  • Pas de séparateurs adjacents (const FEE = 15__00 : non !)
const TURNS = 10_000_000_000 // 10 milliards !
const MASK = 0b1011_0110 // 8 bits, 1er quad = 1011
const FEE = 15_00 // 15,00€, en cents
const FLAT_RATE = 2_500_00 // 2 500, en cents

J’ajoute que ça marche aussi pour les littéraux BigInt (type introduit en ES2020), pour lesquels c’est particulièrement utile.

const MASS_OF_EARTH_IN_KG = 6_000_000_000_000_000_000_000_000n

Attention…

Afin de Ne Pas Casser Internet™, les fonctions Number, parseInt et parseFloat ne reconnaîtront pas ces séparateurs, préservant ainsi la compatibilité ascendante, sacro-sainte en JavaScript.

Dès maintenant ?

Techniquement c’est au stade 3 et ne devrait donc pas être officiel avant ES2021. Mais outre que Babel transpile (tu m’étonnes, super simple), c’est déjà natif depuis Firefox 70, Chrome 75, Edge 79, Safari 13, Opera 62 et Node 12.5. Et on le trouve naturellement en TypeScript aussi.

Donc je dirais oui 😚

Découvrez notre cours vidéo : JavaScript : this is it ! 🖥

Tout savoir sur le fonctionnement de this en JavaScript, des règles fondamentales aux ajustements des API, en passant par les fonctions fléchées, le binding et bien plus encore…