如何在 JavaScript 中的数组值中使用换行符?
我们使用 JavaScript 的 join() 方法在数组值中使用换行符。它允许我们使用通用的 分隔符 将数组的所有组成元素连接成一个字符串。
JavaScript 中的 join() 方法
join() 方法以单个分隔符字符串作为输入，并返回一个字符串，其中数组的所有元素都由指定的分隔符字符串分隔。默认情况下，分隔符字符串是逗号 (,)。
join 方法使用 toString() 方法将数组的元素转换为相应的字符串。空值或未定义值将转换为空字符串。
语法
var str = arr.join(separator)
这里 arr 是一个数组，str 是一个字符串，separator 是用户提供的分隔符字符串。注意 分隔符是可选的。如果没有提供参数，则 JavaScript 将默认使用逗号运算符。
示例 1
这里我们将展示 join 方法的使用。我们将创建一个字符串数组并将其作为函数参数传递，以便打印它并提供分隔符字符串。让我们看看相同的代码。
<!DOCTYPE html> <html> <head> </head> <body> <h3> The join() method in JavaScript:<br> </h3> <p> <div id="result"> </div> </p> <script> function print(arr, separator) { var text = arr.join(separator) document.getElementById("result").innerHTML = text; } var arr = ["first", "second", "third"] var separator = "<br>" print(arr, separator) </script> </body> </html>
在上面的代码中，每个数组元素都由换行符分隔。请注意，我们使用"<br>"来放置换行符，而不是转义序列字符"
"。这是因为我们使用 innerHTML 而不是常规字符串来显示输出。
带有标记字符或换行符的字符串可以拆分为相应的数组，然后合并以创建嵌入换行符的所需字符串。
让我们看一个例子来了解这个用例。
示例 2
我们将从提供的单个字符串创建一个字符串数组，然后使用提供所需分隔符字符串的 join 方法将它们合并回单个字符串。
<!DOCTYPE html> <html> <head> <title> A line break in array values in JavaScript </title> </head> <body> <h3> The join() method in JavaScript:<br> </h3> <p> <div id="result"> </div> </p> <script> function print(str, separator) { var arr = str.split('#') var text = arr.join(separator) document.getElementById("result").innerHTML = text; } var str = "first#second#third" var separator = "<br>" print(str, separator) </script> </body> </html>
在这里，我们首先使用 split() 方法进行拆分，然后使用 join() 方法将用换行符分隔的数组连接起来。
也可以对非数组对象调用 join 方法。该方法仅需要 length 属性 和 整数可访问索引。
但是，它的语法与常规 join 略有不同。
语法
var str = Array.prototype.join.call(arrayLikeObject, Separator)
第一个参数是类似数组的对象，第二个参数是分隔符字符串。同样，第二个参数是可选的，逗号 (,) 是默认值。
这是一个例子 −
示例 3
在这里，我们将创建一个具有长度属性和整数索引元素的类似数组的对象。让我们看看连接运算符对相关对象的作用。
<!DOCTYPE html> <html> <head> </head> <body> <p>The join() method in JavaScript:<br> <div id="result"> </div> </p> <script> function print(obj, separator) { var text = Array.prototype.join.call(obj, separator) document.getElementById("result").innerHTML = text; } const obj = { length: 4, 0: "first", 1: "second", 2: "third", 3: "fourth", }; var separator = "<br>" print(obj, separator) </script> </body> </html>
join 方法首先读取对象的长度。然后，它会迭代那么多元素，并使用提供的分隔符字符串将它们连接起来。
请注意，如果提供的长度短于对象中的元素数，则只会连接那么多元素。例如，在上面的代码中，如果我们提供的长度为 3，那么只有前 3 个元素会被连接。
结论
join 运算符对于将数组或类似数组的对象合并为单个字符串非常有用。它是一种通用方法。
