JavaScript

JavaScriptで消費税の計算に使うMath【四捨五入・切り下げ・切り上げ】

この記事ではJavaScriptで消費税の計算をしていきます。

Mathを使うととても簡単に消費税の計算ができるようになります。

四捨五入・切り下げ・切り上げの3パターンを紹介します。

JavaScriptで消費税の計算

基本形と問題点

まずは基本形です。

分かりやすく、消費税8%で計算します。

const Tax = 1.08;
var priceBeforeTax = 1000;
var price = priceBeforeTax * Tax;
console.log(price);
// 結果
1080

このようになります。これは簡単ですね。小中学生の計算でできます。

ただ、この問題点は、priceBeforeTaxが999円などになると、計算結果が1078.92 のように小数点が出てしまうことです。

販売システムなどで使う場合には小数点以下は四捨五入か、場合によっては切り下げ、切り上げしたいですよね。

Mathで消費税を計算

Mathを使うと上に挙げた問題点を解決することができます。

四捨五入に使うMath.round()

const Tax = 1.08;
var priceBeforeTax = 999;
var price = priceBeforeTax * Tax;
// 四捨五入のコード追加
var priceAfterTax = Math.round(price);

console.log(price);
console.log(priceAfterTax);
// 結果
1078.92
1079

Math.round()を使うと、カッコ内の引数が四捨五入できます。

切り下げに使うMath.floor()

切り下げはMath.floor()を使います。

const Tax = 1.08;
var priceBeforeTax = 999;
var price = priceBeforeTax * Tax;
// 切り下げのコード追加
var priceAfterTax = Math.floor(price);

console.log(price);
console.log(priceAfterTax);
// 結果
1078.92
1078

切り上げに使うMath.ceil()

小数点以下切り上げはMath.ceil()を使います。

const Tax = 1.08;
var priceBeforeTax = 991;
var price = priceBeforeTax * Tax;
// 切り下げのコード追加
var priceAfterTax = Math.ceil(price);

console.log(price);
console.log(priceAfterTax);
// 結果
1070.28
1071

実際に消費税を計算してみよう

実際にJavaScriptのコードを触って試していただくことができます。

金額や消費税率を変えて遊んでみてください。

消費税計算プログラム

では上記の関数を使って、計算をするJavaScriptプログラムを書いてみましょう。

商品のラジオボタンをチェックすると、税込後の金額を計算するというプログラムです。

まずは動作の確認から↓

実際のソースコードは下記になります。

const tax = 1.08;
var productPrice = {
  'a': 1000,
  'b': 500,
  'c': 100
};

function priceCalc(radio){
  var rd_id = radio.id;
  var non_tax_price =  productPrice[rd_id];
  var price = taxCalc(non_tax_price);
  
  var result = document.getElementById("result")
  result.innerHTML = price + '円';
}

function taxCalc (priceBeforeTax) {
  var price = priceBeforeTax * tax;
  var priceAfterTax = Math.round(price);
  return priceAfterTax;
}

<div class="product">
<label><input type="radio" name="item" id="a" onclick ="priceCalc(this);">商品A:1000円(税抜)</label>
<label><input type="radio" name="item" id="b" onclick ="priceCalc(this);" >商品B:500円(税抜)</label>
<label><input type="radio" name="item" id="c" onclick ="priceCalc(this);" >商品C:100円(税抜)</label>
</div>
<div class="gray">
税込:<span id="result"></span>
</div>

上記では四捨五入のMath.roundを使っています。切り下げ、切り上げを採用したい場合にはそれぞれMath.floor、Math.ceilを使えばOKです。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5