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

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

文字列.padStart(目標の長さ, '埋める文字');

基本的な使い方

const num = '5';
console.log(num.padStart(2, '0')); // "05"

const text = 'Hello';
console.log(text.padStart(10, '*')); // "*****Hello"

実践的な使用例

1. 数値の0埋め

// 1桁の数字を2桁に
const num = '7';
console.log(num.padStart(2, '0')); // "07"

// 数値を文字列に変換して使用
const number = 42;
console.log(number.toString().padStart(4, '0')); // "0042"

2. 日付のフォーマット

const month = '6';
const day = '1';
const formattedDate = `${month.padStart(2, '0')}/${day.padStart(2, '0')}`;
console.log(formattedDate); // "06/01"

3. クレジットカード番号のマスク

const cardNumber = '1234567890123456';
const last4Digits = cardNumber.slice(-4);
const maskedNumber = last4Digits.padStart(16, '*');
console.log(maskedNumber); // "************3456"

注意点

1. 文字列の長さが目標の長さ以上の場合、そのまま返されます

const text = 'Hello';
console.log(text.padStart(3, '*')); // "Hello"

2. 埋める文字を指定しない場合、スペースが使用されます

const text = 'Hi';
console.log(text.padStart(4)); // "  Hi"

3. 数値に直接使用することはできません

// エラーになる
const num = 5;
console.log(num.padStart(2, '0')); // TypeError

// 正しい使い方
console.log(String(num).padStart(2, '0')); // "05"

ブラウザ対応状況

`padStart()`メソッドは主要なモダンブラウザで広くサポートされています：

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

まとめ

`padStart()`メソッドは、文字列の左側を特定の文字で埋めるシンプルで便利な機能です。特に：

  • 数値の0埋め
  • 日付のフォーマット
  • データの整形

といった用途で活用できます。ES2017で追加された比較的新しい機能ですが、現在では広くサポートされており、安心して使用できます。