Ownedmedia ウェブ制作に役立つコンテンツを発信中!

javascript 2020.06.29

金額のデータを扱うときに便利なJavaScriptで使えるメソッドまとめ

Tags: ,

先日ある案件でショッピングサイトの制作を行っていたのですが、商品購入ページなどで画面上に金額の情報を計算して出力させるような要件がありました。その時に使ったJavaScriptのいろんなメソッドを備忘録として残しておきたいと思います。

 

Number.prototype.toLocaleString()で3桁カンマ区切り

日本では、数値を表示させる際に1000の位でカンマで区切られることがあります。3桁ごとに区切るため、for文などで桁数分繰り返して、3桁ごとにカンマを入れる方法もあるのですが、とても面倒ですよね、そんな時には数値型対して使える「Number.prototype.toLocaleString()」がとても便利です。下記のように、対象となる値に対して実行するだけで自動的にカンマ区切りにしてくれます。

【JavaScript】

const price = 1000000;
const result = price.toLocaleString('ja-JP');
console.log(result);

 

【console】

1,000,000

 

引数は省略しても大丈夫ですが、下記のようなオプションを入れることで、金額としての表示も可能になります。オプションにはそのほかにもいろんなものがあるようですね。

【JavaScript】

const price = 1000000;
const result = price.toLocaleString('ja-JP', 
 { 
  style: 'currency', 
  currency: 'JPY' 
 }
);
console.log(result);

 

上記のオプションを入れることで、このように金額としてカンマが入った状態で表示させることができます。

【console】

¥1,000,000

 

 

Mathオブジェクトで小数点以下の数値を切り捨て・切り上げ・四捨五入

税率や割引などの計算をする際には、小数点以下の値をどうするかという問題がありますが、こちらもJavaScriptを使うことで切り捨て、切り上げ、四捨五入なども簡単に計算することができます。

【JavaScript】

const number = 1234.567;
const resultFloor = Math.floor(number);
const resultCeil = Math.ceil(number);
const resultRound= Math.round(number);

console.log(
 {
  '切り捨て': resultFloor,
  '切り上げ': resultCeil,
  '四捨五入': resultRound
 }
);

 

実際の計算結果を見ると、このように指定した条件で表示されているのが確認できますね。

【console】

{
 切り上げ: 1234,
 切り捨て: 1235,
 四捨五入: 1235
}

 

 

値の型が数値型、NaNどうかをチェックする

数値の計算は数値型のデータで行われるため、計算の際には数値型がどうかの確認ができると便利です。そんな時には「Number.isFinite()」を使うと便利です。引数に対象となる値を入れると、その値が有限数である場合、つまりJavaScriptで扱える数値の場合にはtrueが返ってきます。

【JavaScript】

const target_1 = 1000 + 200;
const target_2 = '1000' + '200';
const result_1 = Number.isFinite(target_1);
const result_2 = Number.isFinite(target_2);

console.log(
 [ target_1, result_1 ],
 [ target_2, result_2 ]
);

 

2つ目の場合には文字列として結合しているため、数値ではなくなってしまったのでfalseが返されています。

【console】

[1200, true] ["1000200", false]

 

また、数値型のデータを扱っていると「NaN」という返り値が出てくる場合があります。これは、Not a Numberの略で、実数として扱うことができない場合に表現されるものです。これをチェックする方法として「Number.isNaN()」というものがあり、NaNの場合にはtrueが返されます。これを使ってNaNが返された時の条件として分岐させることができます。

【JavaScript】

const target_1 = 1000 + 200;
const target_2 = NaN;
const result_1 = Number.isNaN(target_1);
const result_2 = Number.isNaN(target_2);

console.log(
 [ target_1, result_1 ],
 [ target_2, result_2 ]
);

 

【console】

[1200, false] [NaN, true]

 


 

今回はJavaScriptで数値を扱うメソッドをいくつかまとめてみました。ウェブアプリケーションやショッピングサイトなどで、クライアント側においてデータの計算が必要になった場合には色々と使える機会が多いのではないでしょうか。ぜひ試してみてください。

 

(参考にさせていただいたサイト)
Number.prototype.toLocaleString() – JavaScript | MDN

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?