String.prototype.repeat() 是轻量高效的字符串重复方法，适用于生成UI骨架屏中的占位文本、分隔线及多行段落，配合CSS可实现视觉一致的加载效果。

String.prototype.repeat() 是一个轻量但高效的字符串重复方法，特别适合快速生成 UI 骨架屏（Skeleton Placeholder）中规律性占位文本，比如加载中的文字行、分隔线、模拟段落等。它不依赖 DOM 操作或第三方库，纯 JS 即用，语义清晰、性能友好。

生成等宽文字占位行（如标题/按钮文案）

骨架屏中常需用“—”或“█”模拟未加载的文本宽度。用 repeat() 可按设计稿像素宽度（或字符数）精准控制长度：

• 假设按钮区域宽 120px，平均每个中文字符约 14px，则需约 8–9 个占位符： '█'.repeat(8) → ████████
• 英文标签可结合字体度量粗略估算：'•'.repeat(15) 快速生成一串虚点占位符，视觉上模拟 loading 文本流

构建多行段落骨架（如文章摘要预览）

一段骨架文本通常由 2–4 行不等长的“灰块”组成。利用 repeat() + 换行符 \n 组合，一行代码生成结构化占位：

• ['█'.repeat(30), '█'.repeat(45), '█'.repeat(28)].join('\n') → 三行不同长度的占位段落
• 配合模板字符串更直观：`${'█'.repeat(24)}\n${'█'.repeat(40)}\n${'█'.repeat(18)}`

创建带间距的列表或卡片分隔线

骨架屏中卡片之间常用细灰线（如 ─ 或 ·）分隔。用 repeat() 动态拉伸适配容器宽度：

• '─'.repeat(60) 生成一条 60 字符长的横线，嵌入 <div class="skeleton-divider">${line}</div>
• 响应式场景下可结合 Math.floor(containerWidth / 8) 计算字符数，再 repeat —— 不必用 CSS width，适合 SSR 或轻量渲染

与 CSS 配合提升视觉一致性

repeat() 生成的是纯文本，要达到真实骨架效果，需搭配 CSS 控制颜色、字体和背景：

• 统一使用等宽字体（如 font-family: monospace），确保每个字符宽度一致，避免占位错位
• 设为浅灰：color: #eee; background: #f5f5f5;，并加 line-height: 1.5 模拟真实文本行高
• 如需“闪烁”动画，只需给父容器加 CSS 类（如 .skeleton--loading），无需 JS 干预文本内容