JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメモしたが、「Numerical.js」というライブラリを使用することでもっと簡単に対応できた。また、それ以外にもファイルサイズのbyte表記から数値に変換等も行える模様。以下に利用方法をメモ。
Numerical.js
公式サイト
GitHub
https://github.com/adamwdraper/Numeral-js
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
利用方法
数値のカンマ区切り化と解除
//カンマ区切りの数字を数値(INT型)に変換 const string = '1,000'; const number = numeral(string).value(); console.log(number); //1000 //数値(INT型)をカンマ区切りの数字に変換 const number = 10000; const string = numeral(number).format('0,0'); console.log(string); //10,000
byte表記⇔数値への変換
//100KBという文字列を数値(INT型)に変換 const string = '100KB'; const number = numeral(string).value(); console.log(number); //100000 //数値(INT型)をByteに変換 const number = 100000; const string = numeral(number).format('0b'); console.log(string); //100KB
正確には「100KB→100000Byte」になる筈だけど、本ライブラリの場合ざっくりとした変換になるので注意する。
所感
byte表記⇔数値の変換を正確に行いたい場合は「bytes.js」あたりのライブラリを使うのが良さそう。こちらもその内試しておきたいところ。
関連記事
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...