【JavaScript】String.repeat() メソッドの使い方｜文字列の複製・プログレスバー・区切り線・パディングなど実践パターンまで解説

// 構文: str.repeat(count)
// count: 繰り返す回数（0以上の整数）
// 返り値: 新しい文字列（元の文字列は変更されない）

console.log('ab'.repeat(3));   // 'ababab'
console.log('★'.repeat(5));   // '★★★★★'
console.log('ha'.repeat(4));   // 'hahahaha'
console.log('-'.repeat(20));   // '--------------------'

// 0を渡すと空文字を返す
console.log('abc'.repeat(0));  // ''

// 元の文字列は変更されない
const str = 'hello';
str.repeat(3);                 // 'hellohellohello'
console.log(str);              // 'hello'（元の文字列はそのまま）

console.log('x'.repeat(0));          // ''
console.log('x'.repeat(2.9));        // 'xx' （2.9 → 2 に切り捨て）
console.log('x'.repeat(NaN));        // ''  （NaN → 0 扱い）

try {
  'x'.repeat(-1);                    // RangeError: Invalid count value: -1
} catch (e) {
  console.error(e.message);
}

try {
  'x'.repeat(Infinity);              // RangeError: Invalid count value: Infinity
} catch (e) {
  console.error(e.message);
}

/**
 * 引数を安全に正規化してから repeat する
 * @param {string} str
 * @param {number} n
 */
function safeRepeat(str, n) {
  const count = Number.isFinite(n) ? Math.max(0, Math.floor(n)) : 0;
  return str.repeat(count);
}

console.log(safeRepeat('★', 3));    // '★★★'
console.log(safeRepeat('★', -1));   // ''（エラーにならない）
console.log(safeRepeat('★', Infinity)); // ''（エラーにならない）

// 旧来の書き方（ES2015以前）
const old = Array(5 + 1).join('-');  // '-----'
const old2 = new Array(4).join('ab'); // 'ababab'（要素数-1回）

// repeat() を使った現代の書き方
const modern  = '-'.repeat(5);       // '-----'
const modern2 = 'ab'.repeat(3);      // 'ababab'

// repeat() のほうが意図が明確で間違えにくい
// Array(n+1).join() の +1 は直感的でなく混乱しやすい

/**
 * テキストベースのプログレスバーを生成
 * @param {number} percent - 0〜100
 * @param {number} width   - バーの全幅（文字数）
 */
function progressBar(percent, width = 20) {
  const filled = Math.round((percent / 100) * width);
  const empty  = width - filled;
  return `[${'█'.repeat(filled)}${'░'.repeat(empty)}] ${percent}%`;
}

console.log(progressBar(0));    // '[░░░░░░░░░░░░░░░░░░░░] 0%'
console.log(progressBar(50));   // '[██████████░░░░░░░░░░] 50%'
console.log(progressBar(100));  // '[████████████████████] 100%'

// DOM に表示する場合
function renderProgress(el, percent) {
  el.textContent = progressBar(percent);
}

// シンプルな区切り線
const hr = '─'.repeat(40);
console.log(hr); // '────────────────────────────────────────'

// 見出し付き区切り線
function sectionTitle(title, width = 40) {
  const padding = Math.max(0, width - title.length - 2);
  const left    = Math.floor(padding / 2);
  const right   = padding - left;
  return `${'─'.repeat(left)} ${title} ${'─'.repeat(right)}`;
}

console.log(sectionTitle('設定'));
// '─────────────────── 設定 ──────────────────'

// ツリー構造の表示
function treeItem(label, depth) {
  return '  '.repeat(depth) + '└─ ' + label;
}

console.log(treeItem('root', 0));     // '└─ root'
console.log(treeItem('child', 1));    // '  └─ child'
console.log(treeItem('grandchild', 2)); // '    └─ grandchild'

// JSON 風インデントの生成
function indent(depth, spaces = 2) {
  return ' '.repeat(spaces * depth);
}

/**
 * 星評価のテキストを生成（0〜5）
 * @param {number} rating - 0〜5
 * @param {number} max    - 最大値（デフォルト5）
 */
function starRating(rating, max = 5) {
  const filled = Math.min(Math.max(0, Math.round(rating)), max);
  const empty   = max - filled;
  return '★'.repeat(filled) + '☆'.repeat(empty);
}

console.log(starRating(0));   // '☆☆☆☆☆'
console.log(starRating(3));   // '★★★☆☆'
console.log(starRating(5));   // '★★★★★'
console.log(starRating(4.6)); // '★★★★★'（4.6 → 5 に四捨五入）

// パスワードの文字数をマスク
function maskPassword(password) {
  return '●'.repeat(password.length);
}
console.log(maskPassword('secret123')); // '●●●●●●●●●'

// クレジットカード番号の末尾4桁のみ表示
function maskCardNumber(cardNum) {
  const last4 = cardNum.slice(-4);
  return '*'.repeat(cardNum.length - 4) + last4;
}
console.log(maskCardNumber('1234567890123456')); // '************3456'

// 「指定した回数だけ繰り返す」→ repeat
const loading = '.'.repeat(3);          // '...' （回数起点）

// 「指定した桁数に揃える（ゼロ埋め）」→ padStart
const zeroPad = String(5).padStart(3, '0'); // '005' （桁数起点）

// NG: repeat でゼロ埋めを無理に実現しようとすると冗長
const n = 5;
const bad = '0'.repeat(3 - String(n).length) + n; // '005'（動くが冗長）

// OK: padStart を使う
const good = String(n).padStart(3, '0'); // '005'（こちらが適切）

// グラフのバー描画
const data = [
  { label: 'JavaScript', score: 85 },
  { label: 'Python',     score: 72 },
  { label: 'Java',       score: 60 },
];

function barChart(items, maxWidth = 30) {
  const maxScore = Math.max(...items.map((d) => d.score));
  return items.map(({ label, score }) => {
    const barLen = Math.round((score / maxScore) * maxWidth);
    return `${label.padEnd(12)} ${'▓'.repeat(barLen)} ${score}`;
  }).join('\n');
}

console.log(barChart(data));
// JavaScript  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 85
// Python      ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓     72
// Java        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓       60