JavaScript
Node.js
npm

JavaScriptでカンマ区切りなどによる数値のフォーマットができるNumeral.jsが便利

More than 5 years have passed since last update.


はじめに

JavaScriptで数値のフォーマットをする際、Numeral.jsが便利です。

とてもシンプルに導入・利用できるため、細かい説明は不要だとは思いますが、紹介も兼ねてこの記事を書きました。


導入

Numeral.jsのサイトに行けばすぐにわかるぐらい簡単に導入できます。

HTML上でさくっと使ってみるのであれば、cdnjsで配信されているものを使うとよいでしょう。

node.jsで使用する場合は、おなじみのnpmコマンドでインストールし、require()すれば利用できます。


使い方

使い方も非常に簡単です。詳細な使い方はサイトを見るのがよいかと思いますが、

使い勝手のよさそうな使用例を2つほど紹介してみます。


1000000を3桁区切りのカンマで'1,000,000'のように変換する

一番の使い道はこれだと思います。

var formatedNumber = numeral(1000000).format('0,0');

Numeral.jsでフォーマットを行うには、numeral()にフォーマット対象の数値を渡し、

format()で形式を指定すると、format()が数値を指定された形式にフォーマットした文字列を返します。

format()に指定可能な形式は多くありますが、詳細はサイトをみていただくとして、ここではもう一つの例をあげておきます。


1.2345をパーセント形式で'123.45%'のように変換する

var formatedNumber = numeral(1.2345).format('0.00%');

数値をパーセント表記にするようなシーンでもNumeral.jsは役に立ちます。

もちろん小数点以下の値の桁数も指定可能なので、'0.0%'と指定すると、上記の例では'123.5%'という文字列が返されます。

Numeral.jsの内部ではMath.roundを使用していますが、format()の第2引数に関数を渡すと、その関数を用いて丸め処理を行うこともできます。

var formatedNumber = numeral(1.2345).format('0.00%', Math.floor);

上記を実行すると、結果は'123.4%'となり、丸め処理が切り捨てに変わったことがわかります。


まとめ

Moment.jsに強くインスパイアされていると、サイトにも記載があるとおり、簡潔でわかりやすく使用できるので、

数値を表示する際のフォーマット変換をするのには、Numeral.jsが役に立ちそうです。