
-
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 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を使うことで、
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
面倒くさい計算と共に、適当な単位までつけてくれるこの芸の細かさ!
個人的にはこの機能がおススメです。
以上となりますが、この他にいろいろ機能があるようですので興味のある方は上記のサイトで確認してみてくださいね。
スタッフおすすめの記事
その他の記事
-
2022.6.29HTML/CSS
Webクリエイター
矢口 奈果
【HTML】OGPが反映されない時の落とし穴
-
2022.6.27Webプロモーション
Webコンサルタント
塩月 茉里香
【GA4】Googleアナリティクス4登場!何が変わった?GA4とUAの違いについて
-
2022.6.27システム開発
システムエンジニア
高木 祐玖
[jQuery] 属性の取得について
-
2022.6.24HTML/CSS
Webクリエイター
中山 享祐
リンク切れをチェックできるChrome拡張機能
-
2022.6.21Webプロモーション
取締役
長澤 潤
GA4の目標到達プロセスデータの探索を設定してみた
-
2022.6.13システム開発
システムエンジニア
篠﨑 亮洋
【Windows】バッチファイルでよく見るWebページをまとめて起動
-
2022.6.10Webプロモーション
Webコンサルタント/ディレクター
小山 恭平
【GA4/イベント/やり方/注意】GTMでGA4イベントを設定する際は「カスタム定義」も設定が必要
-
2022.6.8その他
取締役
小林 洋介
メンタルタフネス~能力を発揮するためのセルフコントロール
-
2022.6.7デザイン
Webデザイナー/ディレクター
小島 和剛
【2022年版】企業サイトのSDGsページ掲載パターン
-
2022.6.3Webプロモーション
Webコンサルタント
塩月 茉里香
データポータルでGA4のレポート作成