JS `String.prototype.repeat()`：重复字符串的简洁方法

各位代码界的英雄，大家好！今天咱们来聊聊JavaScript里一个超级实用又简单的小家伙——String.prototype.repeat()，也就是字符串重复方法。别看它名字平平无奇，用起来那叫一个丝滑流畅，能帮你省下不少功夫。准备好了吗？咱们这就开始！

开场白：谁还没个想“复制粘贴”的时候呢？

话说，程序员这行，最讨厌的事情之一就是重复劳动。想象一下，你要生成一串特定长度的字符，比如一排星号、一堆空格，或者只是为了某种格式化输出。如果让你手动复制粘贴，那简直就是对咱们高智商的侮辱！幸运的是，String.prototype.repeat()横空出世，拯救我们于水火之中。

String.prototype.repeat()：基本语法和用法

顾名思义，repeat()方法的作用就是将一个字符串重复指定的次数，然后返回一个新的字符串。它的语法非常简单：

string.repeat(count);

string: 要重复的字符串。
count: 重复的次数，必须是一个非负整数。

敲黑板，划重点！count的注意事项：

如果count是0，repeat()会返回一个空字符串。
如果count是正无穷大(Infinity)，或者count不是一个可以转换为整数的值（比如NaN），repeat()会抛出一个RangeError异常。
如果count是一个负数，repeat()也会抛出一个RangeError异常。虽然有些老版本的浏览器可能不会抛出异常，但咱们写代码要遵循标准，避免踩坑。
如果count是一个小数，它会被向下取整。例如，string.repeat(3.7)等同于string.repeat(3)。

示例代码，让你一目了然：

console.log("hello".repeat(3));   // 输出: "hellohellohello"
console.log("abc".repeat(0));     // 输出: ""
console.log(" ".repeat(5));       // 输出: "     " (五个空格)
console.log("*".repeat(10));      // 输出: "**********"
console.log("la".repeat(2.5));   // 输出: "lala" (2.5被向下取整为2)

// 下面的代码会抛出 RangeError
//console.log("test".repeat(-1));
//console.log("test".repeat(Infinity));

进阶用法：让你的字符串“花样百出”

repeat()方法虽然简单，但和其他JavaScript方法结合起来，就能玩出很多花样。

生成固定长度的字符串：

假设你需要生成一个固定长度的字符串，可以用repeat()方法配合String.prototype.padStart()或String.prototype.padEnd()来实现。
```
function padString(str, length, char = ' ') {
  return str.padStart(length, char.repeat(length));
}

console.log(padString("abc", 10, '*')); // 输出: "*******abc"
```
这个例子中，我们定义了一个padString函数，它可以将一个字符串填充到指定的长度，填充字符默认为空格。char.repeat(length)确保了填充字符足够长，可以填充整个字符串。
创建分隔符：

在控制台输出或者生成报告时，经常需要用到分隔符来使内容更清晰。repeat()可以轻松创建各种长度的分隔符。
```
function printReport(data) {
  const separator = "-".repeat(50);
  console.log(separator);
  console.log("Report Data:");
  console.log(data);
  console.log(separator);
}

printReport({ name: "Example", value: 123 });
```
这段代码会输出一个包含50个连字符的分隔符，让报告内容更加醒目。

模拟加载动画：

虽然这只是一个小技巧，但可以用来在控制台中模拟简单的加载动画。

function loadingAnimation(steps) {
  for (let i = 0; i < steps; i++) {
    const dots = ".".repeat(i % 4); // 循环显示1-4个点
    console.log("Loading" + dots);
    // 模拟耗时操作
    // 可以使用 setTimeout 或者 Promise.resolve().then() 来模拟延迟
    // await new Promise(resolve => setTimeout(resolve, 500));

  }
}

loadingAnimation(10);

这个例子会循环输出"Loading"加上1到4个点，形成一个简单的加载动画。注意，这里需要使用setTimeout或者Promise.resolve().then()来模拟延迟，否则动画会太快，看不清楚。

生成ASCII艺术：

如果你喜欢用字符来绘制图案，repeat()方法绝对是你的好帮手。

function drawTriangle(height) {
  for (let i = 1; i <= height; i++) {
    const spaces = " ".repeat(height - i);
    const stars = "*".repeat(2 * i - 1);
    console.log(spaces + stars);
  }
}

drawTriangle(5);

这段代码会输出一个高度为5的等腰三角形，完全由空格和星号组成。

数据可视化（简化版）：

虽然专业的图表库更强大，但repeat()可以用于在控制台中生成简单的条形图，方便快速查看数据。

function simpleBarChart(data) {
  for (const key in data) {
    const barLength = data[key];
    const bar = "*".repeat(barLength);
    console.log(`${key}: ${bar} (${barLength})`);
  }
}

const data = {
  A: 5,
  B: 10,
  C: 3,
  D: 7
};

simpleBarChart(data);

这个例子会根据data对象中的值，生成对应长度的星号条形图。

表格总结：repeat()方法的特性和用法

特性	说明	示例
作用	将字符串重复指定的次数。	`"abc".repeat(3)` // 输出: "abcabcabc"
参数	`count`: 重复的次数，必须是一个非负整数。	`"x".repeat(5)` // 输出: "xxxxx"
返回值	一个新的字符串，包含原始字符串重复指定次数后的结果。	`"hello".repeat(2)` // 输出: "hellohello"
`count`为0	返回一个空字符串。	`"any".repeat(0)` // 输出: ""
`count`为负数	抛出`RangeError`异常。	`// 抛出 RangeError: "test".repeat(-1)`
`count`为`Infinity`	抛出`RangeError`异常。	`// 抛出 RangeError: "test".repeat(Infinity)`
`count`为小数	向下取整。	`"la".repeat(2.7)` // 输出: "lala" (2.7被向下取整为2)
应用场景	– 生成固定长度的字符串	`"".repeat(10)` // 输出: "*"
	– 创建分隔符	`"-".repeat(50)` // 输出: "————————————————–"
	– 模拟加载动画	`"." .repeat(3)` // 输出: "…"
	– 生成ASCII艺术	`"".repeat(5)` // 输出: "****" (配合空格可以画出各种图案)
	– 简化数据可视化	`"*".repeat(dataValue)` (dataValue是数字，可以快速生成条形图)

兼容性：老朋友，新朋友，都是好朋友

String.prototype.repeat()方法是ECMAScript 2015 (ES6)标准引入的。这意味着现代浏览器（Chrome, Firefox, Safari, Edge等）都完美支持。但是，如果你需要兼容老版本的浏览器（比如IE），你可能需要使用polyfill。

Polyfill方案：自己动手，丰衣足食

Polyfill是一段代码，用于在不支持某个新特性的旧浏览器中提供该特性的功能。对于String.prototype.repeat()，你可以使用以下polyfill：

if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (count === null || count === undefined) {
      count = 0;
    }
    count = +count;
    if (count !== count) {
      count = 0;
    }
    if (count < 0) {
      throw new RangeError('repeat count must be non-negative');
    }
    if (count === Infinity) {
      throw new RangeError('repeat count must be less than infinity');
    }
    let str = '' + this;
    if (count == 0) {
      return '';
    }
    // 确保 count 是一个31位的整数，允许最大值
    if (str.length * count >= 1 << 28) {
      throw new RangeError('repeat count must not overflow maximum string size');
    }
    let rpt = '';
    for (let i = 0; i < count; i++) {
      rpt += str;
    }
    return rpt;
  };
}

这段代码首先检查String.prototype.repeat是否存在，如果不存在，就定义一个具有相同功能的函数。

总结：repeat()虽小，用处不小

String.prototype.repeat()是一个简单却强大的字符串方法。它可以帮助你快速生成重复的字符串，简化代码，提高开发效率。无论是生成分隔符、填充字符串，还是创建简单的动画效果，repeat()都能派上用场。记住它的语法、注意事项和兼容性，你就能在实际开发中灵活运用它，让你的代码更加优雅和高效。

好了，今天的讲座就到这里。希望大家以后在编写JavaScript代码时，能够想起这位默默奉献的repeat()小英雄，让它为你的代码增光添彩！下次有机会，咱们再聊聊其他有趣的JavaScript技巧。各位，再见！

发表回复 取消回复

发表回复取消回复