system

2014.5.29システム開発

インソースマーケティングデザイン

2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました

めくるめくJavaScriptライブラリの世界　～Numeral.js

こんにちは、システムエンジニアの福田です。

今回は「Numeral.js」を紹介したいと思います。

とてもシンプル・簡単に数値のフォーマットを行うことが出来るライブラリです。

http://numeraljs.com/
※MIT License

例えば、ある数値を3桁ごとにカンマ(,)を入れたい場合、正規表現を使うのが一般的でした。

var num = 1234567890;
var out = String( num ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, ‘$1,’ );
console.log(out);

>>1,234,567,890

Numeral.jsを使うことで、シンプルに表現することが出来ます。

var num = 1234567890;
var out = numeral(num).format(‘0,0’);
console.log(out);

>>1,234,567,890

また、パーセント（％）表記をする際に「小数点二位を四捨五入して小数点第一位までを出力する」といった場面に遭遇することがあります。
しかしながら[Math.round]は小数点第一位を四捨五入してくれますので・・・

var num = 1.2345;
out = (Math.round(num * 1000) / 10) + ‘%’;
console.log(out);

>>123.5%

このように1000を掛けた後に10で割るといったいささか面倒くさい処理となります。

これもNumeral.jsを使うことで、

var num = 1.2345;
out = numeral(num).format(‘0.0%’);
console.log(out);

>>123.5%

このように表記することが出来ます。

そして、意外と多いファイルサイズの表記も・・・

var num = 100;
out = numeral(num).format(‘0b’);
console.log(out);
>>100B

var num = 2048;
out = numeral(num).format(‘0b’);
console.log(out);
>>2KB

var num = 40569856 ;
out = numeral(num).format(‘0.0b’);
console.log(out);
>>38.7MB

面倒くさい計算と共に、適当な単位までつけてくれるこの芸の細かさ！
個人的にはこの機能がおススメです。

以上となりますが、この他にいろいろ機能があるようですので興味のある方は上記のサイトで確認してみてくださいね。

WEBサイト診断

現役ウェブ解析士が教えるWebサイトの読み解き方イメージ

システム開発サービスはこちら

スタッフおすすめの記事

その他の記事

ページTOPへ