JavaScriptにおける文字列のパディング

JavaScriptでは、文字列を特定の長さに調整するために「パディング」を行うことができます。これは、指定した文字を文字列の先頭または末尾に追加することで実現します。以下では、JavaScriptにおける文字列のパディング方法を詳しく解説し、例を交えて説明します。

文字列パディングの概要

文字列のパディングは、主に以下のような場面で役立ちます：

• 整形されたフォーマットでデータを表示する際
• 文字列の長さを揃えて比較や操作を行う際
• ログやデバッグ出力の見た目を統一する際

JavaScriptでは、padStartとpadEndという2つのメソッドを使用して文字列のパディングを行います。

padStartの使い方
padEndの使い方
実用的な例

padStartの使い方

padStartは、文字列の先頭に指定した文字を追加して、指定された長さの文字列を作成します。このメソッドは次のように使用します：

string.padStart(targetLength [, padString])

パラメータ：

• targetLength: 最終的な文字列の長さを指定します。
• padString: パディングに使用する文字列を指定します（省略可能で、デフォルトはスペース）。

例：

// 数字のゼロ埋め
console.log('5'.padStart(3, '0')); // 出力: '005'

// スペースでパディング
console.log('abc'.padStart(6)); // 出力: '   abc'

// 任意の文字列でパディング
console.log('123'.padStart(6, '*')); // 出力: '***123'
    

padEndの使い方

padEndは、文字列の末尾に指定した文字を追加して、指定された長さの文字列を作成します。このメソッドは次のように使用します：

string.padEnd(targetLength [, padString])

パラメータの意味はpadStartと同じです。

例：

// 数字の末尾にゼロを埋める
console.log('5'.padEnd(3, '0')); // 出力: '500'

// スペースでパディング
console.log('abc'.padEnd(6)); // 出力: 'abc   '

// 任意の文字列でパディング
console.log('123'.padEnd(6, '*')); // 出力: '123***'
    

実用的な例

以下は、padStartとpadEndを活用した実用的な例です。

例1: 数値のゼロ埋め

// 日付や時刻のフォーマット
const day = '7';
const month = '4';
const year = '2025';

console.log(`${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`); 
// 出力: '2025-04-07'
    

例2: 表の整列

const items = [
    { name: 'りんご', price: 100 },
    { name: 'バナナ', price: 200 },
    { name: 'ぶどう', price: 3000 },
];

items.forEach(item => {
    const name = item.name.padEnd(6);
    const price = item.price.toString().padStart(6, ' ');
    console.log(`${name}: ${price}`);
});
// 出力:
// りんご  :    100
// バナナ  :    200
// ぶどう  :   3000
    

例3: ユーザーIDのフォーマット

// ユーザーIDを一律で表示
const userIds = ['123', '5', '6789'];

userIds.forEach(id => {
    console.log(id.padStart(8, '0'));
});
// 出力:
// 00000123
// 00000005
// 00006789
    

例4: パスコードの隠蔽

// 機密情報を伏せ字に
const passcode = '1234';
console.log(passcode.padStart(8, '*')); // 出力: '****1234'
    

まとめ

JavaScriptのpadStartとpadEndは、文字列の整形やフォーマットにおいて非常に便利なメソッドです。さまざまな場面で活用できるので、ぜひ活用してみてください。

概要に戻る