如何在 JavaScript 中的数组值中使用换行符？

我们使用 JavaScript 的 join() 方法在数组值中使用换行符。它允许我们使用公共分隔符将数组的所有组成元素连接成单个字符串。

JavaScript 中的 join() 方法

JavaScript 的 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

在这里，我们将创建一个具有 length 属性和整数索引元素的类似数组的对象。让我们看看 join 运算符在此对象上的工作方式。

<!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 运算符对于将数组或类似数组的对象合并成单个字符串非常有用。它是一个通用方法。

更新于：2022年11月10日

13K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始
广告