JavaScriptで数値処理をする際に知っていると役立つハッピーセット🌟

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、JavaScriptで数値処理をする際に知っていると役立つハッピーセット🌟について、解説します。

数値の3桁ごとにカンマを付与する(カンマ区切り)

JavaScriptで数値の3桁ごとにカンマを付与する・カンマ区切りをするには、Number.toLocaleString()を使用します。
これは、数値を文字列に変換し、指定したロケールに従って数値をフォーマットします。

例えば、toLocaleString()に"ja-JP"という引数を渡すと、日本語のフォーマットで3桁ごとにカンマを挿入することができます。
実行結果(返り値)は、String型であることに注意してください。

const number4 = 1234567.89;
const formattedNumber = number4.toLocaleString("ja-JP");
console.log(formattedNumber); // 1,234,567.89
console.log(typeof formattedNumber); // string

レート(小数点)をパーセントに変換する方法

レート(小数点)表現をパーセント表現に変換するには、toLocaleString()に"ja-JP"と{style: "percent"}を渡します。

/** 小数点(レート) */
const postRate = 0.3158;

/** パーセント表記(%) */
const percent = postRate.toLocaleString("ja-JP", {
  style: "percent",
});
console.log(percent); // 32%

数値を小数点x桁まで、表示するようにする方法

例えば、JavaScriptで数値を小数点以下2桁まで表示するには、以下のようにtoFixed()を使用します。

実行結果(返り値)は、String型であることに注意してください。

const number5 = 123.456789;
const fixedNum = number5.toFixed(2);
console.log(fixedNum); // 123.46
console.log(typeof fixedNum); // string

数値が整数かどうかを判定する

Number.isInteger()を使用することで、数値が整数かどうかを判定することができます。

console.log(Number.isInteger(10)); // true
console.log(Number.isInteger(10.5)); // false
console.log(Number.isInteger("10")); // false

数値の小数点を切り捨てる・切り上げる

小数点以下を切り捨てる場合には、Math.floor()を使用します。

小数点以下を切り上げる場合には、Math.ceil()を使用します。

console.log(Math.floor(1.95));
// Expected output: 1

console.log(Math.floor(1.05));
// Expected output: 1

console.log(Math.ceil(1.95));
// Expected output: 2

console.log(Math.ceil(1.05));
// Expected output: 2

小数点以下を四捨五入する

小数点以下を四捨五入する場合には、Math.round()を使用します。

console.log(Math.round(3.141592)); // 3

2つの数値を比較したときに、小さい方の数値を返す

2つの数値を比較したときに、小さい方の数値を返す際には、Math.min()が使えます。

// 2つの数値を比較したときに、小さい方の数値を返す
const min = Math.min(12, 25);
console.log(min); // 12

/**
 * NOTE: 2つの数値を比較したときに、小さい方の数値を返す関数
 * @param {number} a
 * @param {number} b
 * @return {number}
 */
function minCalc(a, b) {
  return a < b ? a : b;
}
console.log(minCalc(12, 25)); // 12

2つの数値を比較したときに、大きい方の数値を返す

2つの数値を比較したときに、大きい方の数値を返す際には、Math.max()が使えます。

// 2つの数値を比較したときに、大きい方の数値を返す
const max = Math.max(120, 222);
console.log(max); // 222

/**
 * NOTE: 2つの数値を比較したときに、大きい方の数値を返す関数
 * @param {number} a
 * @param {number} b
 * @return {number}
 */
function maxCalc(a, b) {
  return a > b ? a : b;
}
console.log(maxCalc(120, 222)); // 222

乱数を作成する関数

今まで紹介してきた、組み込み関数とは、違いユーザー定義の関数になりますが、
よくある指定間の値の乱数を作成する関数は、次のような感じです。

/**
 * NOTE: 2つの数値の間の乱数を返す関数
 * @name makeRundom - 乱数生成
 * @params {number} min - 最小値
 * @params {number} max - 最大値
 * @return {number} 乱数
 */
function makeRundom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

数値の1桁目を切り捨てる関数

こちらは、数値の1桁目を切り捨てるユーザー定義の関数になります。

/**
 * NOTE: 12, 15, 18 などの数値の1桁目を切り捨てる関数
 * @name floor10 - 10の位で切り捨てる
 * @params {number} num - 数値
 * @return {number} 切り捨てられた数値
 */
function floor10(num) {
  return Math.floor(num / 10) * 10;
}

console.log(floor10(1)); // 0
console.log(floor10(2)); // 0
console.log(floor10(8)); // 0
console.log(floor10(12)); // 10
console.log(floor10(15)); // 10
console.log(floor10(18)); // 10
console.log(floor10(22)); // 20
console.log(floor10(25)); // 20

まとめ

JavaScriptで数値処理をする際に知っていると役立つハッピーセット🌟について、ご紹介しました。
ぜひご活用ください。
(役にたつ数値処理を発見したら、随時更新していきたいと思います🙆‍♂️)

ちなみに、今回の記事は、以前に個人Blogで記載した内容をZenn用に、加筆修正したものになります。
https://masanyon.com/javascript-number-math-round-floor-tofixed-format/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

https://masanyon.com/javascript-number-math-round-floor-tofixed-format/