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