如何利用String.repeat()方法高效创建指定重复的填充字符串？

本文共计914个文字，预计阅读时间需要4分钟。

String.repeat() 是 ES6 引入的原生方法，直接在字符串上调用，传入一个非负整数即可返回重复拼接后的新字符串。它不会修改原字符串，也不支持小数、负数或 Infinity。如果传入这些值，会立即抛出 RangeError。

• 合法调用："a".repeat(3) → "aaa"
• 空字符串重复任意次仍是空："".repeat(100) → ""
• 传 0 返回空字符串，不是原字符串
• 传 NaN 或 undefined 会被转成 0（隐式转换），但通常应避免依赖这种行为

常见错误：重复次数超限或类型不对

最常踩的坑是把变量直接传进去却没校验类型或范围。比如从表单取值或 API 返回的 count 是字符串 "5" 或 null，repeat() 会尝试转为数字——"5" 没问题，但 null 变成 0，undefined 同样变 0，结果悄无声息地返回空串，很难排查。

• 安全写法：显式转换并判断，如 str.repeat(Math.max(0, parseInt(count, 10) || 0))
• 注意浏览器兼容性：String.repeat() 在 IE 完全不支持，Node.js 从 v4.0.0 开始支持
• 超大次数（比如 1e7）可能触发内存异常，不是所有环境都报错，但 Chrome 会卡死或崩溃

替代方案：当 repeat() 不可用或需要更灵活控制时

如果目标环境不支持 String.repeat()（如旧版 WebView 或某些嵌入式 JS 引擎），或你需要插入分隔符、动态内容，就不能硬套这个方法。

• 手动构建：用 Array(n + 1).join(str)，例如 Array(4).join("x") → "xxx"（注意数组长度要多 1）
• 带分隔符：用 Array(n).fill(str).join(separator)，比如生成 3 个 "-" 用 "|" 连接：Array(3).fill("-").join("|") → "-|-|-"
• 性能提示：对超长重复（>10 万字符），repeat() 通常比循环拼接快；但若需中间插逻辑，还是用 for 或 map 更可控

实际填充场景：空格、占位符、进度条模拟

真正用起来，String.repeat() 很少单独存在，常配合 padStart/padEnd 或模板拼接。比如对齐日志输出、构造固定宽度字段、生成简易进度条。

• 右对齐数字：(num + "").padStart(8, "0") 等价于 "0".repeat(8 - (num + "").length) + num，但前者更语义清晰
• 构造分隔线："=".repeat(50) 比手敲五十个等号靠谱得多
• 防误操作：重复字符用于视觉反馈，如 "⚠️".repeat(3) → "⚠️⚠️⚠️"，注意 emoji 是单字符，不会因 UTF-16 代理对出错

真正容易被忽略的是：字符串里含换行或不可见字符（如 \u200b）时，repeat() 会原样复制——看着像空格，实际是零宽间隔，调试时得用 JSON.stringify() 看真实内容。