ドル、円、ユーロ、ポンドなど155種類の通貨フォーマットに対応した軽量JSライブラリ「CurrencyFormatter.js」

ドル、円、ユーロ、ポンドなど152種類の通貨フォーマットに対応した軽量JSライブラリ「CurrencyFormatter.js」

CurrencyFormatter.jsは、ドル、円、ユーロ、ポンドなど155種類の通貨フォーマットに対応した軽量JSライブラリです。

ドル、円、ユーロ、ポンドなど155種類の通貨フォーマットに対応しており、Excelの書式設定と同じ感覚で小数点以下の表示設定や、マイナス表示の設定ができます。

155種類の通貨単位に対応しています。

152種類の通貨単位に対応

デモ

デモページを用意しました。

使い方

ダウンロード

GitHubの右側にある「Clone or download」の中にある「Download ZIP」ボタンからダウンロードすることができます。

ダウンロード

解凍したフォルダに入っているcurrencyFormatter.min.jsを使います。

共通

JavaScript

currencyFormatter.min.jsを読み込みます。

<script src="js/currencyFormatter.min.js"></script>

サンプル1

HTML

<div class='money'> 1234536.32 </div>
<div class='money'> 8798458.77 </div>
<div class='money'> -1234536.32 </div>
<div class='money'> 0 </div>

JavaScript

body閉じタグの手間で実行します。

<script>
OSREC.CurrencyFormatter.formatAll({
  selector: '.money', 
  currency: 'JPY',
  pattern: '! #,##0.;! -#,##0.;! 0'
});
</script>
</body>

表示結果

サンプル1

「currency」で通貨単位を指定します。

「pattern」で表示フォーマットを指定します。! #,##0.としました。

!が通貨単位の表示です。€(ユーロ)だったら1,234,536 €のように後ろに表示したいので#,##0. !とします。

#,##0.は3桁区切りで、小数点以下を表示しない設定です。サンプル2では、#,##0.00として、小数点2桁まで表示するようにしました。

表示桁数以下は四捨五入(1234536.32→1234536、8798458.77→8798459)して表示されます。

「pattern」は、'! #,##0.;! -#,##0.;! 0'としており、;(セミコロン)! #,##0.! -#,##0.! 0の3つに区切られています。1つ目の! #,##0.がプラス値の表示形式、! -#,##0.がマイナス値の表示形式、3つ目の! 0がゼロの表示形式です。サンプル2では、2つ目を(! -#,##0.00)として、マイナス値を(-123,456,32)のようにカッコ付きで表示するようにしました。

サンプル2

HTML

<div class='money2'> 1234536.32 </div>
<div class='money2'> 8798458.77 </div>
<div class='money2'> -1234536.32 </div>
<div class='money2'> 0 </div>

JavaScript

body閉じタグの手間で実行します。

<script>
OSREC.CurrencyFormatter.formatAll({
  selector: '.money2', 
  currency: 'JPY',
  pattern: '! #,##0.00;(! -#,##0.00);! 0.00'
});
</script>
</body>

表示結果

サンプル2

小数点以下2桁を表示する設定です。

マイナス値はカッコ付きで表示しています。

サンプル3

HTML

<div class='money3' data-ccy='USD'> 1234564.58 </div>
<div class='money3' data-ccy='EUR'> 1234564.58 </div>
<div class='money3' data-ccy='GBP'> 8798583.85 </div>
<div class='money3' data-ccy='CHF'> 0.9754 </div>

JavaScript

body閉じタグの手間で実行します。

<script>
OSREC.CurrencyFormatter.formatEach('.money3');
</script>
</body>

表示結果

サンプル3

ドル、ユーロ、ポンド、スイスフランなど複数の通貨を表示しています。カスタムデータ属性data-ccy=''で通貨単位を指定します。