数値を整形/フォーマットする: npm ライブラリの format-number を使って
Tweetnpm ライブラリの format-number を使って、数値を整形/フォーマットする方法を紹介します。
例えば小数点以下も含まれる数値を、小数点以下を切り上げて、3桁ごとに ,
で区切り、単位として円をつける、なんていう作業が必要なことはよくありますよね。
他にも、小数点以下も含まれる数値を、小数点第二位までに繰り上げて、パーセントをつけるとか。
こういう処理を自分で書くと、案外時間がかかるし、ミスも発生します。
format-number という npm ライブラリを使うことで、簡単に実装できます。
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 回");
});
});
});