String.prototype.repeat 适合做加载进度条占位符，因其原生、无依赖、语义清晰且能精准控制重复次数；需配合 Math.floor 和 Math.max 处理边界值，并注意参数必须为安全整数，否则抛 RangeError。
为什么 String.prototype.repeat 适合做加载进度条占位符
它原生、无依赖、语义清晰，且能精准控制重复次数——这正是动态渲染「已加载长度」最需要的。比如加载到 60%，你只需要 "█".repeat(6)（配合总宽10格），不用拼接循环或引入工具库。
注意：它只生成静态字符串，不自动更新；你要自己把重复结果塞进 DOM 或模板里，再配合定时器或 Promise 进度事件来驱动重绘。
repeat 的参数陷阱：小数、负数、NaN 都会报错
传给 repeat 的必须是**安全整数**（0–253-1），否则直接抛 RangeError。常见翻车点：
- 用百分比直接除以 10 得到 6.3 →
"█".repeat(6.3)报错 - 异步拿到的
progress是null或undefined→ 转成NaN后报错 - 服务端返回负值（如 -1 表示错误）→
repeat(-1)报错
实操建议：务必先 Math.max(0, Math.floor(x))，例如：
const barWidth = 10; const filled = Math.max(0, Math.floor(progress * barWidth)); const bar = "█".repeat(filled) + "░".repeat(barWidth - filled);
和模板字符串混用时，别忘了空格与对齐
单纯 "█".repeat(5) 输出 "█████"，但真实进度条常需固定宽度、右对齐剩余空间，或加前缀/后缀文字。容易忽略的是 Unicode 字符宽度差异：
-
"█"和"░"在多数终端/等宽字体中是全角，但某些 CSS 环境下可能被压缩 - 如果用
"."或"-"替代，记得统一用等宽字符，否则跳动明显 - 嵌入 HTML 时，
white-space: pre可能比纯空格更稳
推荐写法（兼顾可读与健壮）：
function renderProgress(percent) {
const width = 20;
const filled = Math.min(width, Math.max(0, Math.floor(percent * width)));
return `[${"█".repeat(filled)}${"░".repeat(width - filled)}] ${Math.round(percent * 100)}%`;
}性能不是问题，但别在每帧都调用 repeat 做无意义重建
repeat 本身很快，V8 对小字符串重复做了优化。真正拖慢 UI 的是频繁 DOM 写入或字符串拼接后没节流。
- 如果进度更新频率 > 60fps（比如 WebSocket 流式推送），建议用
requestAnimationFrame节流 - 避免每次重算整个字符串：若只有最后几位变化，可只更新变化部分（但对简单进度条得不偿失）
- 服务端推送精度为 1% 时，
repeat最多调用 100 次/全程，完全无需担心
真正该检查的，是你的 percent 数据源是否稳定、是否带抖动——这才是视觉卡顿的主因，不是 repeat。
字符重复本身很简单，难的是让进度值可信、更新节奏合理、视觉反馈不突兀。把 repeat 当作一个可靠的小齿轮，而不是魔法开关。
