The ES6 version of ECMAScript, known as ECMAScript6 (ES6), introduces the repeat method for strings, allowing the repetition of a specified string. This function can be particularly useful for displaying data multiple times within functions and events. It's important to note that the repeat method does not alter the original string data; instead, it generates the repeated data as needed.
Put simply, the repeat method generates a new string by iterating over the specified string within the script tag. By utilizing the repeat method, the provided string is duplicated a specified number of times. Negative values used with the repeat method result in an error, while a zero value returns an empty string. Conversely, a positive value will display the duplicated string.
Syntax
The syntax demonstrates the utilization of the repeat function in JavaScript with a string parameter.
<script>
let string_var = "input data";
let method_var = string_var.repeat(counts);
</script>
Description
- The variable "string_var" is responsible for duplicating the provided string input.
- The argument "counts" is mandatory and specifies the desired quantity of string duplications.
Supported Browsers
The following browsers support the JavaScript string repeat method.
- Google Chrome version 41 or later
- Edge 12 or higher
- Firefox versions 24 or later
- Opera version 28 or later
- Safari version 9 or later
- Internet Explorer 11 or above.
Note: - Internet Explorer 11 and earlier version does not support the repeat method.
Examples
The subsequent instances demonstrate various data types associated with distinct events.
In this demonstration, we illustrate the fundamental string repetition technique in JavaScript. By employing single and double counts, we can duplicate the input string and exhibit the resulting value.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Strings repeat() Method </title>
</head>
<body>
<h2> JavaScript Strings repeat() Method </h2>
<p> The repeat() method return the new string with the required count! </p>
<b id = "demo1"></b> <br>
<b id = "demo2"></b>
<script>
let string_var = "Hello Student!";
let method_var = string_var.repeat(1);
let method_var2 = string_var.repeat(2);
document.getElementById("demo1").innerHTML = method_var;
document.getElementById("demo2").innerHTML = method_var2;
</script>
</body>
</html>
Output
The image displays details about recurring methods as the result.
Demonstration 2: Illustrated below is a fundamental method for repeating strings in JavaScript. By employing two repeat methods within the onclick function, we can showcase the counting of string values upon button click.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Strings repeat() Method </title>
</head>
<body>
<h2> JavaScript Strings repeat() Method </h2>
<p> The repeat() method return the new string with the required count! </p>
<button onclick = "mydata();"> Click Here! </button> <br>
<b id = "demo1"></b> <br>
<b id = "demo2"></b>
<script>
function mydata(){
let string_var = "Hello Student!";
let method_var = string_var.repeat(3);
let method_var2 = string_var.repeat(4);
document.getElementById("demo1").innerHTML = method_var;
document.getElementById("demo2").innerHTML = method_var2;
}
</script>
</body>
</html>
Output
The image displays output detailing the information on repeat methods.
Illustrative Example 3: Demonstrated below is a fundamental JavaScript method for repeating strings. The method allows for repetition with both integer and decimal values. By specifying the count, we can display the repeated string.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Strings repeat() Method </title>
</head>
<body>
<h2> JavaScript Strings repeat() Method </h2>
<p> The repeat() method return the new string with the required count! </p>
<button onclick = "mydata();"> Click Here! </button> <br>
<b id = "demo1"></b> <br>
<b id = "demo2"></b>
<script>
function mydata(){
let string_var = "Hello Coder!";
//this count converts into four digits
let method_var = string_var.repeat(4.6);
//this count shows into two digits
let method_var2 = string_var.repeat(1+1);
document.getElementById("demo1").innerHTML = method_var;
document.getElementById("demo2").innerHTML = method_var2;
}
</script>
</body>
</html>
Output
The image displays output detailing information about repeat methods.
Illustrative Example 4: Here, we are demonstrating the fundamental string repetition technique in JavaScript. By utilizing both a single and double count, we are able to replicate the input string and exhibit the resulting value. In the event of a negative count, a type error will be presented in the console tab, while a count of zero will yield no value.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Strings repeat() Method </title>
</head>
<body>
<h2> JavaScript Strings repeat() Method </h2>
<p> The repeat() method return the new string with the required count! </p>
<b id = "demo1"> the error shows in console tab </b> <br>
<b id = "demo2"></b>
<script>
let string_var = "Hello Student!";
let method_var = string_var.repeat(-1);
let method_var2 = string_var.repeat(0.2);
console.log(method_var);
document.getElementById("demo2").innerHTML = method_var2;
</script>
</body>
</html>
Output
The displayed image exhibits the output of the information related to repeat methods.
Illustrative Example 5: Demonstrated below is a fundamental string duplication technique in JavaScript. The repeat method allows for the inclusion of both whole and fractional values. The count can be incremented by clicking the button.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Strings repeat() Method </title>
</head>
<body>
<h2> JavaScript Strings repeat() Method </h2>
<p> The repeat() method return the new string with the required count! </p>
<button id = "btn_var"> Click Here! </button> <br>
<b id = "demo3"></b> <br>
<b id = "demo1"></b> <br>
<b id = "demo2"></b>
<script>
var counts = 0;
var btn_var = document.getElementById("btn_var");
btn_var.onclick = function(){
counts++;
document.getElementById("demo3").innerHTML = "Clicks: "+counts;
let string_var = "Hello Students!";
//here we get count + 1 times string.
let method_var = string_var.repeat(1+counts);
document.getElementById("demo1").innerHTML = method_var;
let string_var2 = "Hello Coder!";
//here, we get the count times string.
let method_var2 = string_var2.repeat(counts);
document.getElementById("demo2").innerHTML = method_var2;
}
</script>
</body>
</html>
Output
The displayed image exhibits the output of information on repeat methods.
Illustrative Example 6: Presented below is a demonstration of the fundamental string repetition technique in JavaScript. The repeat method allows for the direct input of data without the necessity of utilizing a variable to obtain string data.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Strings repeat() Method </title>
</head>
<body>
<h2> JavaScript Strings repeat() Method </h2>
<p> The repeat() method return the new string with the required repeat count! </p>
<b id = "demo1"></b> <br>
<b id = "demo3"></b> <br>
<b id = "demo2"></b>
<script>
//this count converts into four digits
let method_var = "2".repeat(4.6);
document.getElementById("demo1").innerHTML = method_var;
//this count shows into two digits
let method_var2 = "hello".repeat(1+1);
document.getElementById("demo2").innerHTML = method_var2;
let method_var3 = "$".repeat(6);
document.getElementById("demo3").innerHTML = method_var3;
</script>
</body>
</html>
The displayed image exhibits the output detailing repeat methods information.
Conclusion
The repeat function allows for the repetition of a string data multiple times. It enables direct manipulation and operation of the value through the functionality provided by JavaScript.