add locales to options to allow number formatting

Author: izolate

lib/millify.ts

@@ -1,5 +1,5 @@
 import { defaultOptions, MillifyOptions } from "./options";
-import { parseValue, roundTo, getDefaultDecimalSeparator } from "./utils";
+import { getFractionDigits, parseValue, roundTo } from "./utils";
 
 // Most commonly used digit grouping base.
 const DIGIT_GROUPING_BASE = 1000;
@@ -75,7 +75,9 @@ function millify(value: number, options?: Partial<MillifyOptions>): string {
   // a corresponding unit. Returning anything else is ambiguous.
   const unitIndexOutOfRange = unitIndex >= opts.units.length;
   if (unitIndexOutOfRange) {
-    return value.toLocaleString();
+    // At this point we don't know what to do with the input value,
+    // so we return it as is, without localizing the string.
+    return value.toString();
   }
 
   // Round decimal up to desired precision.
@@ -95,12 +97,11 @@ function millify(value: number, options?: Partial<MillifyOptions>): string {
   // Add a space between number and abbreviation.
   const space = opts.space ? " " : "";
 
-  // Replace decimal mark if desired.
-  const defaultDecimalSeparator = getDefaultDecimalSeaparator();
-  let formatted = rounded.toLocaleString();
-  if (opts.decimalSeparator) {
-    formatted = formatted.replace(defaultDecimalSeparator, opts.decimalSeparator);
-  }
+  // Format the number according to the desired locale.
+  const formatted = rounded.toLocaleString(opts.locales, {
+    // toLocaleString needs the explicit fraction digits.
+    minimumFractionDigits: getFractionDigits(rounded),
+  });
 
   return `${prefix}${formatted}${space}${suffix}`;
 }

lib/options.ts

@@ -7,9 +7,10 @@ export interface MillifyOptions {
    */
   precision: number;
   /**
-   * The type of decimal marker (e.g. period "."") or *null* to use locale default.
+   * The active browser or server location. A string with a BCP 47 language
+   * tag, or an array of such strings, e.g. "en-US".
    */
-  decimalSeparator: string | null;
+  locales?: string | string[];
   /**
    * Convert units to lower case.
    */
@@ -28,7 +29,6 @@ export interface MillifyOptions {
  * Default options for Millify.
  */
 export const defaultOptions: MillifyOptions = {
-  decimalSeparator: null,
   lowercase: false,
   precision: 1,
   space: false,

lib/utils.ts

@@ -30,10 +30,12 @@ export function roundTo(value: number, precision: number): number {
 }
 
 /**
- * Calculates the default decimal separator given the current locale
+ * Returns the number of digits after the decimal.
  */
-export function getDefaultDecimalSeparator(): string {
-  const value = 1.1;
-  const result = value.toLocaleString().substring(1, 2);
-  return result;
+export function getFractionDigits(num: number): number {
+  if (Number.isInteger(num)) {
+    return 0;
+  }
+  const decimalPart = num.toString().split(".")[1];
+  return decimalPart?.length ?? 0;
 }

test.js

@@ -78,10 +78,15 @@ test("precision adjusts according to options", (t) => {
   );
 });
 
-test("allows a custom decimal separator", (t) => {
-  const result = millify(55500, { decimalSeparator: "_" });
-  const expected = "55_5K";
-  t.is(expected, result);
+test("formats to different languages", (t) => {
+  const tests = new Map([
+    ["en-US", "1.2"],
+    ["de-DE", "1,2"],
+    ["ar-SA", "١٫٢"],
+  ]);
+  for (const [locales, expected] of tests.entries()) {
+    t.is(millify(1.2, { locales }), expected);
+  }
 });
 
 test("allows a space between decimal and unit", (t) => {

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "es2018",
     "module": "commonjs",
     "declaration": true,
     "outDir": "./dist",