JavaScriptで数値フォーマットを指定して表示する方法

社員番号や金額など、Webサイトの入力後にクリックすると、入力した数値を所定の形式で表示することがよくあります。この場合、JavaScriptプログラミングでは「数値フォーマット」の設定を記述します。

JavaScriptのプログラミングの初心者の人の中には、数値フォーマットの設定方法について難しいと感じている方も多いのではないでしょうか？

この記事では、JavaScriptのプログラミングでよく用いられる数値フォーマットの設定方法をサンプルを交えながら解説します。

目次 [非表示]

1 JavaScriptの数値フォーマットとは？
2 JavaScriptで数値フォーマットを設定する方法
3 JavaScript数値フォーマットサンプルコード
4 まとめ

JavaScriptの数値フォーマットとは？

数値フォーマットとは、計算結果を設定した変数を所定の表示形式で表示する方法です。

具体的には、金額を計算した後に、通貨形式（¥や$をつけて表示する）やカンマ表記（xxx,xxx,xx0で表示する）などの形式で表示する方法です。

JavaScriptで数値フォーマットを設定する方法

JavaScriptで数値フォーマットを設定する方法として、古い記事では正規表現を、文字列置換などの方法を見かけます。しかし、EcmaScriptの仕様改定に伴い、現在は、これらの設定はほとんどが関数で表現できます。

ここでは関数を使用した、目的に応じた設定方法を紹介します。

ゼロパディング（ゼロ埋め）

ゼロパディング（ゼロ埋め）とは、整数の前に0を埋めて表示することです。

企業の社員番号を表示する時は、ゼロパディングで表示するのが一般的です。

6桁表記で、社員番号が’1234’の場合：001234

このような表現を行う時、padStartメソッドを使用するのが簡単です。なお、padStart メソッドは、ECMAScript 2017で使用できるようになりました。

padStartメソッドの構文は以下の通りです。

変換対象の文字列.padStart(長さ [,変換後の文字列形式])

1	変換対象の文字列.padStart(長さ [,変換後の文字列形式])

引数には以下を指定します。

長さ：変換後の文字列の長さを指定します
変換後の文字列形式：padStartメソッドで設定する変換後の文字列形式を指定します

先ほどの例として示した「6桁表記で、社員番号が’1234’の場合：001234」をpadStartメソッドで記述すると以下のようになります。

const companyCode = '1234';

console.log(companyCode.padStart(6, '0'));
// => '００１２３４'

const companyCode = '1234';

console.log(companyCode.padStart(6, '0'));

// => '００１２３４'

このように、変換後の文字列の長さと、’0’を引数として渡せばOKです。

カンマ区切り

金額表示は3桁毎にカンマで区切って表現することが一般的です。また、金額表示以外にも、数値を表現するときには3桁で区切って表現することがあります。このような時、以下のようにIntl.NumberFormatオブジェクトを使用します。

var num = 10000;

console.log(new Intl.NumberFormat('ja-JP').format(num));
// => '10,000' ロケールに日本を指定

var num = 10000;

console.log(new Intl.NumberFormat('ja-JP').format(num));

// => '10,000' ロケールに日本を指定

上記ではNumberFormatの引数として’ja-JP’を指定しましたが、指定なしでも問題ありません。

通貨記号

金額表示の場合、”¥”などの通貨記号を数値の前につけて表示するケースもあるのではないでしょうか？

その場合、以下のようにintl.NumberFormatオブジェクトを使用して表示することができます。

var Num = 10000;

// 日本円の表記
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(num));
// => '￥10,000'

var Num = 10000;

// 日本円の表記

console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(num));

// => '￥10,000'

また、ドルやユーロの場合には以下のように表記します。

var Num = 10000;

// ドルの表記
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'USD' }).format(num));
// => '$10,000.00'

// ユーロの表記
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'EUR' }).format(num));
// => '10,000.00 €'

var Num = 10000;

// ドルの表記

console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'USD' }).format(num));

// => '$10,000.00'

// ユーロの表記

console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'EUR' }).format(num));

// => '10,000.00 €'

パーセント表記

小数をパーセントで表記したいケースもあるのではないでしょうか？

その場合は、NumberFormatの第二引数で「style: ‘percent’」を指定すれば表示できます。

var percentNum1 = 0.12345;
var percentNum２ = 0.98765;

console.log(new Intl.NumberFormat('ja', { style: 'percent'}).format(percentNum1)); 
// => '12%'
console.log(new Intl.NumberFormat('ja', { style: 'percent'}).format(percentNum2)); 
// => '99%' 日本語表記のパーセントの場合、3桁で四捨五入されます

var percentNum1 = 0.12345;

var percentNum２ = 0.98765;

console.log(new Intl.NumberFormat('ja', { style: 'percent'}).format(percentNum1));

// => '12%'

console.log(new Intl.NumberFormat('ja', { style: 'percent'}).format(percentNum2));

// => '99%' 日本語表記のパーセントの場合、3桁で四捨五入されます

また、有効数字を指定して表示することもできます。

var percentNum1 = 0.12345;

console.log(new Intl.NumberFormat('ja', { style: 'percent', maximumSignificantDigits: 3}).format(percentNum1)); 
// => '12.3%'

var percentNum1 = 0.12345;

console.log(new Intl.NumberFormat('ja', { style: 'percent', maximumSignificantDigits: 3}).format(percentNum1));

// => '12.3%'

ここでは、有効数字を最大3桁を指定しました。

JavaScript数値フォーマットサンプルコード

「ゼロパディング」で紹介したpadStartメソッドを用いて入力した値を6桁で表示するサンプルコードです。6桁未満の場合は、0を埋めて表示します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>sample1</title>
</head>
<body>
  <form id="form1" action="#">
    <input type="text" id="input_number" value="">
    <input type="button" onclick="func1()" value="桁変換">
  </form>
  <div id="output_number"></div>
  <script language="javascript" type="text/javascript">
  function func1() {
    var input_number = document.getElementById("input_number").value;
    input_number = "6桁表記後「" + input_number.padStart(6, '0') + "」";
    document.getElementById("output_number").innerHTML = input_number
  }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>sample1</title>

</head>

<body>

</form>

function func1() {

var input_number = document.getElementById("input_number").value;

input_number = "6桁表記後「" + input_number.padStart(6, '0') + "」";

document.getElementById("output_number").innerHTML = input_number

}

</script>

</body>

</html>

初期表示は以下の通りです。

値として”1234″を入力します。

「桁変換」ボタンをクリックすると、以下の通りの表示となりました。

数値の前にゼロを埋めて表示されています。

まとめ

今回はJavaScriptでの「数値フォーマット」を設定する方法を解説しましたが、いかがでしたか？

JavaScriptで数値フォーマットを設定するには、ゼロパディングの場合はpadStartを、数値をカンマ区切り、通貨、パーセントなどの形式で設定する場合にはintl.NumberFormatを用いると簡単にできます。

今回は4つのケースで数値フォーマットを指定する方法を解説しましたが、他にも指定方法がたくさんあります。

これを機会にケースに応じたさまざまな指定方法を学んでみてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。