【Vue.js】「6万5千円」「6.5万円」の通貨形式をhelper.tsでフォーマットする方法

概要

Vue.jsのヘルパー関数（helpers.ts）で「●●万▲▲千円」という表示方法と「●.▲万円」という表示方法を実装しました。
例：6万5千円 → 6.5万円　

サンプルコード

helper.tsとは、Vue.js アプリケーション内で共通のユーティリティ関数やヘルパーメソッドを定義するための TypeScript ファイル。以下のように定義しておくことで、Vue コンポーネント内で効率的に使用できます。

「●●万▲▲千円」の表示方法

export function formatMoney(value: number): string {
    const man = Math.floor(value / 10000);
    const sen = Math.floor((value % 10000) / 1000);
    return `${man}<span class="text-money">万</span>${sen ? sen + '<span class="text-money">千</span>' : ''}<span class="text-money">円</span>`;

• Math：数学的な演算や関数を提供するJavaScriptの組み込みオブジェクト。
  • Math.floor()メソッドは、小数点以下を切り捨てて整数に変換するために使用
• man：valueを10000で割った商（万単位の部分）を計算
• sen：valueを10000で割った余りを1000で割った商（千単位の部分）を計算
• テンプレート文字列：バッククォートで囲まれており、変数や式を埋め込むことができる

「●.▲万円」の表示方法

export function formatMoney(value: number): string {
    const money = value / 10000;
    const man = Number(money.toFixed(2));
    return `${man}<span class="text-money">万円</span>`;

• money変数：与えられたvalueを10000で割った結果を代入
• Number(money.toFixed(2));：小数点以下2桁まで丸めて、数値に変換

以下で実行してみると...

上記JavaScriptのコードをコマンドライン上で直接実行すると以下のようになります。

function formatMoney1(value) {
    const man = Math.floor(value / 10000);
    const sen = Math.floor((value % 10000) / 1000);
    return `${man}万${sen ? sen + '千' : ''}円`;
}

function formatMoney2(value) {
    const money = value / 10000;
    const man = Number(money.toFixed(2));
    return `${man}万円`;
}

const value = 65000;
const result1 = formatMoney1(value);
const result2 = formatMoney2(value);

console.log(result1);
console.log(result2);

// 6万5千円
// 6.5万円 

二つの異なる表示方法が出力されたことが確認できました。