JavaScript 字符串 repeat()方法

ECMAScript6（ES6）提供了字符串repeat（）特性来重复给定的字符串。该功能可以使用函数和事件来提供数据以显示所需的时间。repeat方法不会影响原始数据，但会显示出类似的数据。

换句话说，字符串repeat方法在脚本标记上使用该方法显示一个新的字符串。repeat（）方法将给定字符串复制指定的次数。repeat方法的负值会显示一个错误，而零值则不显示任何数据。正值显示字符串值。

语法

语法显示了如何使用JavaScript的repeat（）方法与字符串值。

<script>
let string_var = "input data";
let method_var = string_var.repeat(counts);
</script>

说明

“string_var”复制给定输入字符串的数据。
“counts”是一个必需的输入参数。它显示所需的字符串的复制次数。

支持的浏览器

以下浏览器支持javascript字符串重复方法。

Google Chrome 41版本或更高版本
Edge 12或更高版本
Firefox 24版本或更高版本
Opera 28版本或更高版本
Safari 9版本或更高版本
Internet Explorer 11或更高版本。

注：- Internet Explorer 11及更早版本不支持repeat()方法。

示例

以下示例显示了具有不同事件的多个数据类型。

示例1： 以下示例显示了javascript中基本的字符串重复方法。我们可以通过使用一个和两个计数来复制输入字符串并显示值。

<!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>

输出

该图像显示重复方法信息作为输出。

JavaScript 字符串 repeat()方法

示例2： 下面的示例展示了javascript中的基本字符串重复方法。我们可以使用两个repeat方法与onclick函数一起使用。如果我们点击按钮，它将展示字符串值的计数。

<!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>

输出

图像显示重复方法信息作为输出。

JavaScript 字符串 repeat()方法

示例3： 以下示例展示了JavaScript中的基本字符串重复方法。我们可以使用repeats方法来重复字符串，并可以使用加法和小数值。我们可以添加计数并显示字符串。

<!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>

输出

图像显示了重复方法的输出信息。

JavaScript 字符串 repeat()方法

示例4： 以下示例演示了javascript中基本的字符串重复方法。我们可以使用一个和两个计数来复制输入字符串并显示值。负计数在控制台选项卡中显示类型错误，计数为零则不显示任何值。

<!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>

输出

图像显示了重复方法的输出信息。

JavaScript 字符串 repeat()方法

示例5： 以下示例展示了JavaScript中基本的字符串重复方法。我们可以使用repeats方法与附加和小数值。点击按钮时，我们可以增加计数。

<!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>

输出

该图像显示了重复方法信息作为输出。

JavaScript 字符串 repeat()方法

示例6: 以下示例展示了javascript中基本的字符串重复方法。我们可以使用重复方法直接数据。我们不需要任何变量来获取字符串数据。

<!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>

图像显示重复方法信息作为输出。

JavaScript 字符串 repeat()方法