この記事では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
1079Math.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です。
