JavaScriptで文字列を右詰めにしたい場合、`padEnd()`メソッドを使用することで簡単に実装できます。この記事では、`padEnd()`メソッドの基本的な使い方から実践的な例まで詳しく解説します。

padEnd()メソッドの基本構文

文字列.padEnd(目標の長さ [, 埋め込む文字列])

第1引数には目標の文字列長を指定し、第2引数には埋め込みたい文字列を指定します。第2引数は省略可能で、省略した場合は空白で埋められます。

基本的な使用例

const text = "Hello";

// 空白で右詰め
console.log(text.padEnd(10));        // "Hello     "

// 特定の文字で右詰め
console.log(text.padEnd(10, "-"));   // "Hello-----"

// 複数文字での右詰め
console.log(text.padEnd(10, "abc")); // "Helloabcab"

実践的な使用例

1. 表形式のデータ整形

const names = ["John", "Alice", "Bob"];
const maxLength = Math.max(...names.map(name => name.length)) + 2;

names.forEach(name => {
    console.log(name.padEnd(maxLength, " ") + "| データ");
});

// 出力:
// John  | データ
// Alice | データ
// Bob   | データ

2. 金額の表示

const prices = [100, 1000, 10000];
const formatted = prices.map(price => 
    price.toString().padEnd(6, " ") + "円"
);

console.log(formatted);
// ["100   円", "1000  円", "10000 円"]

注意点

1. 目標の長さが現在の文字列長より短い場合、文字列はそのまま返されます：

console.log("Hello".padEnd(3)); // "Hello"

2. 第2引数の文字列が長い場合、必要な長さまでで切り捨てられます：

console.log("Hi".padEnd(5, "abcdef")); // "Hiabc"

ブラウザ対応状況

`padEnd()`メソッドは比較的新しい機能ですが、現在では主要なブラウザで広くサポートされています：

  • Chrome 57以降
  • Firefox 48以降
  • Safari 10以降
  • Edge 15以降

古いブラウザをサポートする必要がある場合は、ポリフィルを使用するか、代替の実装を検討してください。

まとめ

`padEnd()`メソッドを使用することで、JavaScriptで簡単に文字列の右詰めが実現できます。表形式のデータ整形や金額表示など、様々な用途で活用できる便利なメソッドです。ブラウザの互換性を考慮しつつ、適切に使用することで、より見やすいテキスト表示を実現できます。