String.repeat生成UI骨架屏占位符方法

String.prototype.repeat() 是一个轻量、高效且语义清晰的原生 JavaScript 方法，特别适合在 UI 骨架屏（Skeleton Placeholder）开发中快速生成视觉一致的占位内容——无论是精准控制宽度的等宽文字行（如按钮、标题）、结构化的多行段落，还是响应式适配的分隔线，仅需一行代码即可完成；配合等宽字体、浅灰配色与 CSS 动画，无需 DOM 操作或第三方库，就能实现高性能、易维护、SSR 友好的加载态体验。

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 字符长的横线，嵌入
  ${line}
• 响应式场景下可结合 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 干预文本内容

到这里，我们也就讲完了《String.repeat生成UI骨架屏占位符方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！