format-quantity

Formats a number (or string that appears to be a number) as one would see it written in imperial measurements, e.g. "1 1/2" instead of "1.5". To use vulgar fraction characters like "⅞", pass true as the second argument.

For the inverse operation, converting a string (which may include mixed numbers or vulgar fractions) to a number, check out numeric-quantity or, if you're interested in parsing recipe ingredient strings, try parse-ingredient.

Installation

npm

# npm
npm i format-quantity

# yarn
yarn add format-quantity

Browser

In the browser, all exports including the formatQuantity function are available on the global object FormatQuantity.

<script src="https://unpkg.com/format-quantity"></script>
<script>
  console.log(FormatQuantity.formatQuantity(10.5)); // "10 1/2"
</script>

Usage

import { formatQuantity } from 'format-quantity';

formatQuantity(1.5); // "1 1/2"
formatQuantity(2.66); // "2 2/3"
formatQuantity(3.875, true); // "3⅞"

The return value will be null if the provided argument is not a number or a string that evaluates to a number using parseFloat. The return value will be an empty string ("") if the provided argument is 0 or "0" (this is done to fit the primary use case of recipe ingredient quantities).

Options

The second parameter to formatQuantity can be a boolean value or an options object.

vulgarFractions

Returns vulgar fractions when appropriate. This option has the same effect as passing a plain boolean value as the second parameter.

formatQuantity(3.875, { vulgarFractions: true }); // "3⅞"
// is the same as
formatQuantity(3.875, true); // "3⅞"

tolerance

This option determines how close the decimal portion of a number has to be to the actual quotient of a fraction to be considered a match. For example, consider the fraction 1⁄3: 1 ÷ 3 = 0.3333... repeating forever. The number 0.333 (333 thousandths) is not equivalent to 1⁄3, but it's very close. So even though 0.333 !== (1 / 3), formatQuantity(0.333) will return "1/3" the same as formatQuantity(1/3).

A lower tolerance increases the likelihood that formatQuantity will return a decimal representation instead of a fraction or mixed number since the matching algorithm will be stricter. An greater tolerance increases the likelihood that formatQuantity will return a fraction or mixed number, but at the risk of arbitrarily matching an incorrect fraction simply because it gets evaluated first (see src/index.ts for the actual order of evaluation).

// Low tolerance - returns a decimal since 0.333 is not close enough to 1/3
formatQuantity(0.333, { tolerance: 0.00001 }); // "0.333"
// High tolerance - matches "1/3" even for "3/10"
formatQuantity(0.3, { tolerance: 0.1 }); // "1/3"
// Way too high tolerance - incorrect result because thirds get evaluated before halves
formatQuantity(0.5, { tolerance: 0.5 }); // "1/3"

fractionSlash

Uses the fraction slash character ("\u2044") to separate the numerator and denominator instead of the regular "solidus" slash ("\u002f"). This option is ignored if the vulgarFractions option is also true.

formatQuantity(3.875, { fractionSlash: true }); // "3 7⁄8"
formatQuantity(3.875, { fractionSlash: true, vulgarFractions: true }); // "3⅞"

Other exports