金額のデータを扱うときに便利なJavaScriptで使えるメソッドまとめ
先日ある案件でショッピングサイトの制作を行っていたのですが、商品購入ページなどで画面上に金額の情報を計算して出力させるような要件がありました。その時に使ったJavaScriptのいろんなメソッドを備忘録として残しておきたいと思います。
今回はJavaScriptで数値を扱うメソッドをいくつかまとめてみました。ウェブアプリケーションやショッピングサイトなどで、クライアント側においてデータの計算が必要になった場合には色々と使える機会が多いのではないでしょうか。ぜひ試してみてください。 (参考にさせていただいたサイト) Number.prototype.toLocaleString() - JavaScript | MDN
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
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories