reinstantiate Number.IntlFormat comparison

Benchmark created on

Preparation HTML

<script src="
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
"></script>

Setup

const twoDecimalsFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

// rounds to nearest integer
const nearestIntegerFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const memoizedCreateFormatter = _.memoize((decimalDigits) => {
  return new Intl.NumberFormat("en-US", {
    style: "percent",
    minimumFractionDigits: decimalDigits,
    maximumFractionDigits: decimalDigits,
  });
});

const formatPercentReuseFormatter = (val, options = {}) => {
  const { rounded = false } = options;
  if (val === null || val === undefined) {
    return null;
  }
  if (rounded) {
    return nearestIntegerFormatter.format(val);
  }

  return twoDecimalsFormatter.format(val);
};

const formatPercentRecreateFormatter = (val, options = {}) => {
  const { rounded = false } = options;
  if (val === null || val === undefined) {
    return null;
  }
  const roundedDecimalDigits = rounded ? 0 : 2;
  const formatter = memoizedCreateFormatter(roundedDecimalDigits);
  return formatter.format(val);
};

Test runner

Ready to run.

Testing in
TestOps/sec
reusing NumberFormat instance
formatPercentReuseFormatter(1);
formatPercentReuseFormatter(725.1251256);
formatPercentReuseFormatter(725.1);
formatPercentReuseFormatter(100000.125125, {rounded: true});
formatPercentReuseFormatter(100000, {rounded: true});
ready
recreating NumberFormat instance
formatPercentRecreateFormatter(1);
formatPercentRecreateFormatter(725.1251256);
formatPercentRecreateFormatter(725.1);
formatPercentRecreateFormatter(100000.125125, {rounded: true});
formatPercentRecreateFormatter(100000, {rounded: true});
ready

Revisions

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