技術ブログ

プログラミング、IT関連の記事中心

JavaScriptで金額フォーマット表示(カンマ区切り toLocaleString 正規表現)

目次

toLocaleStringで3桁カンマ区切り

以下の様に数値型のデータに「toLocaleString」関数を使用することで、3桁毎にカンマ区切りされたデータが出力されます。

<script>
    const target = 100000000;
    console.log(target.toLocaleString()); // 100,000,000
</script>

文字列型の場合には、一度数値型に変換してから使用してください。

<script>
    const target = 100000000;
    console.log(Number(target).toLocaleString()); // 100,000,000
</script>

正規表現で3桁カンマ区切り

以下の様にカンマ区切りの関数を用意して実行する事でカンマ区切りに変換できます。
ちなみに、本関数は小数点にも対応しているので小数点も利用できます。(小数点はカンマ区切りされません)

<script>
    function toComma(target) {
        var targetSplit = String(target).split('.');
        var ret = String(targetSplit[0]).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        if (targetSplit.length > 1) {
            ret = ret + '.' + targetSplit[1];
        }
        return ret;
    }
    console.log(toComma(10000000)); // 10,000,000
</script>