npm ライブラリの format-number を使って、数値を整形/フォーマットする方法を紹介します。

例えば小数点以下も含まれる数値を、小数点以下を切り上げて、3桁ごとに , で区切り、単位として円をつける、なんていう作業が必要なことはよくありますよね。

他にも、小数点以下も含まれる数値を、小数点第二位までに繰り上げて、パーセントをつけるとか。

こういう処理を自分で書くと、案外時間がかかるし、ミスも発生します。

format-number という npm ライブラリを使うことで、簡単に実装できます。

CodeSandbox で実際の挙動を確認する

format-number を使って数値を整形する関数を作る
import formatNumber from "format-number";

export const yenFormat = number => {
  const myFormat = formatNumber({
    suffix: " 円",
    round: 0
  });
  return myFormat(number);
};

export const yenTenIchiFormat = number => {
  const myFormat = formatNumber({
    suffix: " 円",
    round: 1
  });
  return myFormat(number);
};

export const percentTenNiFormat = number => {
  const myFormat = formatNumber({
    suffix: " %",
    round: 2
  });
  return myFormat(number);
};

export const clicksFormat = number => {
  const myFormat = formatNumber({
    suffix: " 回",
    round: 0
  });
  return myFormat(number);
};

これを適応するとどうなるか、テストで確認しましょう。

test
import {
  yenFormat,
  yenTenIchiFormat,
  percentTenNiFormat,
  clicksFormat
} from "/src/numberFormat";

describe("format", () => {
  describe("yenFormat", () => {
    const number = 123456.78999;
    it("check", () => {
      const res = yenFormat(number);
      expect(res).toEqual("123,457 円");
    });
  });

  describe("yenTenIchiFormat", () => {
    const number = 123456.78999;
    it("check", () => {
      const res = yenTenIchiFormat(number);
      expect(res).toEqual("123,456.8 円");
    });
  });

  describe("percentTenNiFormat", () => {
    const number = 123456.78999;
    it("check", () => {
      const res = percentTenNiFormat(number);
      expect(res).toEqual("123,456.79 %");
    });
  });

  describe("clicksFormat", () => {
    const number = 123456.78999;
    it("check", () => {
      const res = clicksFormat(number);
      expect(res).toEqual("123,457 回");
    });
  });
});