0%

Programmingプログラミングナレッジ

Posted:2020.06.29

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

先日ある案件でショッピングサイトの制作を行っていたのですが、商品購入ページなどで画面上に金額の情報を計算して出力させるような要件がありました。その時に使った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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】