【超便利】JavaScriptでカンマ区切り、ゼロパディング、桁数指定など、数値を思い通りに整形する方法
JavaScriptで先頭にゼロを付けて数字を出力する方法
String.prototype.padStart()メソッドを使う
padStart()メソッドは、文字列を指定した長さまで左側へ空白で埋めてくれる便利なメソッドです。数字にゼロパディングを行う場合、以下の様に使用できます。
function padStart(num, length) {
const str = num.toString();
return str.padStart(length, '0');
}
console.log(padStart(1, 3)); // 結果: 001
console.log(padStart(12, 5)); // 結果: 00012
この方法の利点は、シンプルで分かりやすいコードを書けることです。また、padStart()メソッドは、数字以外の文字列に対しても使用できます。
文字列操作を行う
padStart()メソッドを使わずに、文字列操作だけでゼロパディングを行うこともできます。以下のコードは、その一例です。
function padStart(num, length) {
let str = num.toString();
while (str.length < length) {
str = '0' + str;
}
return str;
}
console.log(padStart(1, 3)); // 結果: 001
console.log(padStart(12, 5)); // 結果: 00012
この方法の利点は、padStart()メソッドが古いブラウザではサポートされていない場合に使用できることです。一方、padStart()メソッドよりもコードが冗長になるという欠点があります。
補足
- 上記のコード例では、
toString()メソッドを使って数字を文字列に変換しています。 - ゼロパディングする桁数は、自由に設定できます。
- ゼロ以外の文字列でパディングすることもできます。
上記以外にも、ライブラリを使ってゼロパディングを行う方法もあります。例えば、Lodashなどのライブラリには、padStart()メソッドに似た機能を提供しているものがあります。
JavaScriptで数字にゼロパディングを行うには、主にString.prototype.padStart()メソッドと、文字列操作の2つの方法があります。それぞれの特徴を理解して、状況に応じて使い分けることが重要です。
String.prototype.padStart()メソッドを使う
function padStart(num, length) {
const str = num.toString();
return str.padStart(length, '0');
}
console.log(padStart(1, 3)); // 結果: 001
console.log(padStart(12, 5)); // 結果: 00012
文字列操作を行う
function padStart(num, length) {
let str = num.toString();
while (str.length < length) {
str = '0' + str;
}
return str;
}
console.log(padStart(1, 3)); // 結果: 001
console.log(padStart(12, 5)); // 結果: 00012
説明
このコードは、padStart()メソッドを使って数字にゼロパディングを行います。
str.padStart(length, '0')を使って、文字列の左側を指定した長さ (length) まで空白 ('0') で埋めます。
このコードは、文字列操作だけで数字にゼロパディングを行います。
while (str.length < length)ループを使って、文字列の長さ (str.length) が指定した長さ (length) に達するまで処理を繰り返します。- ループ内では、
str = '0' + strを使って、文字列の左側に'0'を追加します。
JavaScriptで数字にゼロパディングを行うその他の方法
sprintfライブラリは、フォーマット文字列を使って文字列を整形するライブラリです。ゼロパディングを行う場合、以下の様に使用できます。
const sprintf = require('sprintf-js');
console.log(sprintf('%03d', 1)); // 結果: 001
console.log(sprintf('%05d', 12)); // 結果: 00012
この方法の利点は、フォーマット文字列を使って簡単にゼロパディングを行えることです。また、sprintfライブラリは、数字以外にも様々なデータの整形に使用できます。
NumberFormatterライブラリは、数字の書式設定を行うライブラリです。ゼロパディングを行う場合、以下の様に使用できます。
const NumberFormatter = require('number-formatter');
const formatter = new NumberFormatter({
pattern: '0000'
});
console.log(formatter.format(1)); // 結果: 0001
console.log(formatter.format(12)); // 結果: 0012
この方法の利点は、NumberFormatterライブラリを使って様々な書式設定を行えることです。小数点の表示や、区切り文字の挿入なども簡単に行えます。
カスタム関数を使う
上記の方法以外にも、カスタム関数を作ってゼロパディングを行うこともできます。例えば、以下の様なコードを作成できます。
function padStart(num, length) {
const str = num.toString();
let padded = '';
for (let i = 0; i < length - str.length; i++) {
padded += '0';
}
return padded + str;
}
console.log(padStart(1, 3)); // 結果: 001
console.log(padStart(12, 5)); // 結果: 00012
この方法の利点は、自分のニーズに合わせたゼロパディング処理を作成できることです。
補足
- 上記で紹介したライブラリは、npmなどでインストールする必要があります。
- カスタム関数を作る場合は、パフォーマンスや可読性などを考慮する必要があります。
javascript text-formatting number-formatting
