在JavaScript中重复字符串的三种方法

In this article, I’ll explain how to solve freeCodeCamp’s “Repeat a string repeat a string” challenge. This involves repeating a string a certain number of times.

在本文中，我将解释如何解决freeCodeCamp的“ 重复字符串重复字符串 ”挑战。 这涉及重复一个字符串一定次数。

There are the three approaches I’ll cover:

我将介绍三种方法：

1. using a while loop
   使用while循环
2. using recursion
   使用递归
3. using ES6 repeat() method
   使用ES6 repeat()方法

算法挑战说明 (The Algorithm Challenge Description)

Repeat a given string (first argument) num times (second argument). Return an empty string if num is not a positive number.

重复给定的字符串(第一个参数) num次(第二个参数)。 如果num不是正数，则返回一个空字符串。

function repeatStringNumTimes(str, num) {return str;
}
repeatStringNumTimes("abc", 3);

提供的测试用例 (Provided test cases)

repeatStringNumTimes("*", 3) should return "***".repeatStringNumTimes("abc", 3) should return "abcabcabc".repeatStringNumTimes("abc", 4) should return "abcabcabcabc".repeatStringNumTimes("abc", 1) should return "abc".repeatStringNumTimes("*", 8) should return "********".repeatStringNumTimes("abc", -2) should return "".

方法1：使用While循环重复字符串 (Approach 1: Repeat a String with a While Loop)

A while statement executes its statement as long as a specified condition evaluates to true.

只要指定条件的值为真，while语句就会执行其语句。

A while statement looks like this:

一会儿语句看起来像这样：

while (condition)statement

with a condition which is evaluated before each pass through the loop. If the condition is true, the statement is executed. If the condition is false, the execution continues with any statement after the while loop.

条件，条件在每次通过循环之前进行评估。 如果条件为真，则执行该语句。 如果条件为假，则在while循环后继续执行任何语句。

The statement is executed as long as the condition is true. Here’s the solution:

只要条件为真，就执行该语句。 解决方法如下：

function repeatStringNumTimes(string, times) {// Step 1. Create an empty string that will host the repeated stringvar repeatedString = "";// Step 2. Set the While loop with (times > 0) as the condition to checkwhile (times > 0) { // As long as times is greater than 0, the statement is executed// The statementrepeatedString += string; // Same as repeatedString = repeatedString + string;times--; // Same as times = times - 1;}/* While loop logicCondition       T/F       repeatedString += string      repeatedString        timesFirst iteration    (3 > 0)        true            "" + "abc"                  "abc"               2Second iteration   (2 > 0)        true           "abc" + "abc"               "abcabc"             1Third iteration    (1 > 0)        true          "abcabc" + "abc"            "abcabcabc"           0Fourth iteration   (0 > 0)        false}*/// Step 3. Return the repeated stringreturn repeatedString; // "abcabcabc"
}repeatStringNumTimes("abc", 3);

And again, without comments:

再说一次，不加评论：

function repeatStringNumTimes(string, times) {var repeatedString = "";while (times > 0) {repeatedString += string;times--;}return repeatedString;
}
repeatStringNumTimes("abc", 3);

方法2：使用条件和递归重复一个字符串 (Approach 2: Repeat a String using a Conditional and Recursion)

Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result. There are a few key features of recursion that must be included in order for it to work properly.

递归是一种迭代操作的技术，方法是使函数重复调用自身直到获得结果。 为了使其正常工作，必须包含递归的一些关键功能。

• The first is a base case: this is a statement, usually within a conditional clause like if, that stops the recursion.

  第一个是基本情况 ：这是一条语句，通常在条件子句(如if ，该语句停止递归。

• The second is a recursive case: this is the statement where the recursive function is called on itself.

  第二种是递归的情况 ：这是在其自身上调用递归函数的语句。

Here’s the solution:

解决方法如下：

function repeatStringNumTimes(string, times) {// Step 1. Check if times is negative and return an empty string if trueif (times < 0) {return "";}// Step 2. Check if times equals to 1 and return the string itself if it's the case.if (times === 1) {return string;}// Step 3. Use recursionelse {return string + repeatStringNumTimes(string, times - 1); // return "abcabcabc";}/* First Part of the recursion methodYou need to remember that you won’t have just one call, you’ll have several nested callstimes       string + repeatStringNumTimes(string, times - 1)1st call         3                 "abc" + ("abc", 3 - 1)2nd call         2                 "abc" + ("abc", 2 - 1)3rd call         1                 "abc" => if (times === 1) return string;4th call         0                  ""   => if (times <= 0) return "";Second part of the recursion method4th call will return      ""3rd call will return     "abc"2nd call will return     "abc"1st call will return     "abc"The final call is a concatenation of all the stringsreturn "abc" + "abc" + "abc"; // return "abcabcabc";*/
}
repeatStringNumTimes("abc", 3);

And again, without comments:

再说一次，不加评论：

function repeatStringNumTimes(string, times) {if(times < 0) return "";if(times === 1) return string;else return string + repeatStringNumTimes(string, times - 1);
}
repeatStringNumTimes("abc", 3);

方法3：使用ES6 repeat()方法重复一个字符串 (Approach 3: Repeat a String using ES6 repeat() method)

For this solution, you’ll use the String.prototype.repeat() method:

对于此解决方案，您将使用String.prototype.repeat()方法：

• The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

  repeat()方法构造并返回一个新字符串，该字符串包含指定数量的被调用的字符串的副本，并串联在一起。

Here’s the solution:

解决方法如下：

function repeatStringNumTimes(string, times) {//Step 1. If times is positive, return the repeated stringif (times > 0) { // (3 > 0) => truereturn string.repeat(times); // return "abc".repeat(3); => return "abcabcabc";}//Step 2. Else if times is negative, return an empty string if trueelse {return "";}
}repeatStringNumTimes("abc", 3);

And again, without comments:

再说一次，不加评论：

function repeatStringNumTimes(string, times) {if (times > 0)return string.repeat(times);elsereturn "";
}
repeatStringNumTimes("abc", 3);

You can use a ternary operator as a shortcut for the if/else statement, like this:

您可以将三元运算符用作if / else语句的快捷方式，如下所示：

times > 0 ? string.repeat(times) : "";

This can be read as:

可以理解为：

if (times > 0) {    return string.repeat(times);
} else {return "";
}

You can then return the ternary operator in your function:

然后，您可以在函数中返回三元运算符：

I hope you found this helpful. This is part of my “How to Solve FCC Algorithms” series of articles on the freeCodeCamp Algorithm Challenges, where I propose several solutions and explain step-by-step what happens under the hood.

希望对您有所帮助。 这是我关于freeCodeCamp算法挑战的“如何解决FCC算法”系列文章的一部分，在该系列文章中我提出了几种解决方案并逐步解释了实际情况。

Two ways to confirm the ending of a String in JavaScriptIn this article, I’ll explain how to solve freeCodeCamp’s “Confirm the Ending” challenge.

在JavaScript中确认字符串结尾的两种方法 在本文中，我将解释如何解决freeCodeCamp的“确认结尾”挑战。

Three Ways to Reverse a String in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Reverse a String”

在JavaScript中反转字符串的三种方法 本文基于Free Code Camp基本算法脚本“反转字符串”

Three Ways to Factorialize a Number in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Factorialize a Number”

在JavaScript中分解数字的三种方法 本文基于Free Code Camp基本算法脚本“简化数字”

Two Ways to Check for Palindromes in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Check for Palindromes”.

用JavaScript检查回文的两种方法 本文基于Free Code Camp基本算法脚本“检查回文”。

Three Ways to Find the Longest Word in a String in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Find the Longest Word in a String”.

在JavaScript中查找字符串中最长单词的三种方法 本文基于Free Code Camp基本算法脚本“查找字符串中最长单词”。

Three Ways to Title Case a Sentence in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Title Case a Sentence”.

用JavaScript给句子加标题的三种方法 本文基于Free Code Camp基本算法脚本“标题加句子”。

If you have your own solution or any suggestions, share them below in the comments.

如果您有自己的解决方案或任何建议，请在下面的评论中分享。

Or you can follow me on Medium, Twitter, Github and LinkedIn, right after you click the green heart below ;-)

或者，您也可以在单击下面的绿色心脏之后立即在Medium ， Twitter ， Github和LinkedIn上关注我；-)

‪#‎StayCurious‬, ‪#‎KeepOnHacking‬ & ‪#‎MakeItHappen‬!

‪＃StayCurious‬，‪＃KeepOnHacking‬和‪＃MakeItHappen‬！

其他资源 (Additional Resources)

• while loop — MDN

  while循环— MDN

• repeat() method — MDN

  repeat()方法— MDN

• recursion — MDN

  递归— MDN

• Ternary Operator — MDN

  三元运算符— MDN

翻译自: https://www.freecodecamp.org/news/three-ways-to-repeat-a-string-in-javascript-2a9053b93a2d/