calculate amounts or strings for rendering price (v4)

Revision 4 of this benchmark created on

Preparation HTML

<p id="price"></p>
<p id="discounted-price"></p>

Setup

const numberFormat = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });

function render(id, data) {
  document.getElementById(id).textContent = data;
}

Test runner

Ready to run.

Testing in
TestOps/sec
Represent directly
const dataAsNumber = 92.99
const formattedPrice = numberFormat.format(dataAsNumber);
console.log(formattedPrice, 'number')

render('price', formattedPrice)
ready
Represent with transform from string and parsefloat
const dataAsString = '92.99'
const formattedPrice = numberFormat.format(parseFloat(dataAsString));
console.log(formattedPrice, 'string')
render('price', formattedPrice)
ready
Represent without parsefloat just strings
const dataAsString = '92.99'
const formattedPrice = numberFormat.format(dataAsString);
console.log(formattedPrice, 'string no parsefloat')
render('price', formattedPrice)
ready
Represents with transforms of units nanos as nums
const dataAsUnitsNanosNums = { units: 92, nanos: 99 }
const formattedPrice = numberFormat.format(`${dataAsUnitsNanosNums.units}.${dataAsUnitsNanosNums.nanos}`);
console.log(formattedPrice, 'units/nanos as nums')
render('price', formattedPrice)
ready
Represent with transform from units nanos
const dataAsUnitsNanos = { units: BigInt(92), nanos: BigInt(99 * 1e6)}
const formattedPrice = numberFormat.format(`${Number(dataAsUnitsNanos.units)}.${(Number(dataAsUnitsNanos.nanos) / 1e6)}`);
console.log(formattedPrice, 'units/nanos')
render('price', formattedPrice)
ready
units/nanos multiple
function formatUnitsNanos(data) {
  return numberFormat.format(`${Number(data.units)}.${(Number(data.nanos) / 1e6)}`);
}

const fullPriceAsUnitsNanos = { units: BigInt(92), nanos: BigInt(99 * 1e6)}
const discountedPriceAsUnitsNanos = { units: BigInt(79), nanos: BigInt(99 * 1e6)}
const fullPriceFormatted = formatUnitsNanos(fullPriceAsUnitsNanos);
const discountedPriceFormatted = formatUnitsNanos(discountedPriceAsUnitsNanos)

console.log(`Rendering ${fullPriceFormatted} and ${discountedPriceFormatted}`)
// render the full price
render('price', fullPriceFormatted);
if (Number(discountedPriceAsUnitsNanos.units)) {
  // render the discounted price
  render('discounted-price', discountedPriceFormatted);
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.