勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法

  JavaScript

以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメモしたが、「Numerical.js」というライブラリを使用することでもっと簡単に対応できた。また、それ以外にもファイルサイズのbyte表記から数値に変換等も行える模様。以下に利用方法をメモ。

 

Numerical.js

公式サイト

http://numeraljs.com/

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」あたりのライブラリを使うのが良さそう。こちらもその内試しておきたいところ。

 - JavaScript

  関連記事

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法

電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...